/* =============================================================
   SINGLE PROFESOR — Sistema de calificaciones
   Paleta: Navy oscuro · Azul acento · Dorado estrellas
   Versión 1.0 — Profesores UDG
   ============================================================= */

/* ─── VARIABLES ─── */
:root {
  --sp-bg:           #1a1f2e;
  --sp-card:         #252b3b;
  --sp-card-border:  rgba(255, 255, 255, 0.07);
  --sp-card-hover:   rgba(255, 255, 255, 0.04);
  --sp-accent:       #4299e1;
  --sp-accent-dark:  #2b6cb0;
  --sp-accent-light: #63b3ed;
  --sp-star:         #ECC94B;
  --sp-star-empty:   #4a5568;
  --sp-text:         #e2e8f0;
  --sp-text-muted:   #a0aec0;
  --sp-green:        #68D391;
  --sp-red:          #FC8181;
  --sp-orange:       #F6AD55;
  --sp-radius:       12px;
  --sp-radius-sm:    8px;
  --sp-shadow:       0 4px 24px rgba(0, 0, 0, 0.35);
  --sp-transition:   all 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────
   TARJETA ENCABEZADO DEL PROFESOR
───────────────────────────────────────────────────────────── */
.sp-profesor-card {
  background:    var(--sp-card);
  border:        1px solid var(--sp-card-border);
  border-radius: var(--sp-radius);
  padding:       24px 28px;
  margin-bottom: 20px;
  box-shadow:    var(--sp-shadow);
}

.sp-profesor-header {
  display:     flex;
  align-items: center;
  gap:         20px;
  flex-wrap:   wrap;
}

/* Avatar de iniciales */
.sp-profesor-avatar {
  width:            68px;
  height:           68px;
  border-radius:    50%;
  background:       linear-gradient(135deg, var(--sp-accent), var(--sp-accent-dark));
  color:            #fff;
  font-size:        24px;
  font-weight:      700;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  letter-spacing:   1px;
  box-shadow:       0 4px 12px rgba(66, 153, 225, 0.4);
}

.sp-profesor-info { flex: 1; min-width: 200px; }

.sp-profesor-nombre {
  font-size:    1.55rem;
  font-weight:  700;
  color:        var(--sp-text);
  margin:       0 0 6px;
  line-height:  1.2;
}

.sp-profesor-centro {
  color:       var(--sp-text-muted);
  font-size:   0.9rem;
  margin-bottom: 4px;
}
.sp-profesor-centro i      { color: var(--sp-accent); margin-right: 5px; }
.sp-profesor-centro strong { color: var(--sp-accent-light); }

.sp-votes-line {
  color:     var(--sp-text-muted);
  font-size: 0.82rem;
  margin-top: 4px;
}
.sp-votes-line i { margin-right: 4px; }

/* Badge de puntuación general */
.sp-general-badge {
  text-align:  center;
  min-width:   90px;
  padding:     10px 14px;
  background:  rgba(255,255,255,0.04);
  border-radius: var(--sp-radius-sm);
  border:      1px solid var(--sp-card-border);
}

.sp-gen-score {
  display:     block;
  font-size:   2.6rem;
  font-weight: 800;
  line-height: 1;
}
.sp-gen-score.score-good { color: var(--sp-green); }
.sp-gen-score.score-mid  { color: var(--sp-orange); }
.sp-gen-score.score-bad  { color: var(--sp-red); }

.sp-gen-scale {
  font-size: 0.8rem;
  color:     var(--sp-text-muted);
}

.sp-gen-label {
  font-size:  0.72rem;
  color:      var(--sp-text-muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────
   PANEL DE ESTADÍSTICAS
───────────────────────────────────────────────────────────── */
.sp-stats-panel {
  background:    var(--sp-card);
  border:        1px solid var(--sp-card-border);
  border-radius: var(--sp-radius);
  padding:       24px 28px;
  margin-bottom: 20px;
  box-shadow:    var(--sp-shadow);
}

.sp-section-title {
  color:          var(--sp-text);
  font-size:      1.05rem;
  font-weight:    600;
  margin-bottom:  18px;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--sp-card-border);
}
.sp-section-title i { color: var(--sp-accent); margin-right: 8px; }

/* Cuadrícula de estrellas */
.sp-stars-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;
  margin-bottom:         22px;
}
@media (max-width: 480px) {
  .sp-stars-grid { grid-template-columns: 1fr; }
}

.sp-star-item {
  background:    var(--sp-card-hover);
  border:        1px solid var(--sp-card-border);
  border-radius: var(--sp-radius-sm);
  padding:       14px 16px;
}

.sp-star-label {
  font-size:     0.78rem;
  color:         var(--sp-text-muted);
  margin-bottom: 8px;
}
.sp-star-label i { color: var(--sp-accent); margin-right: 4px; }

.sp-star-display {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.sp-star {
  font-size: 1.05rem;
  color:     var(--sp-star-empty);
}
.sp-star.filled { color: var(--sp-star); }

.sp-star-num {
  margin-left: 8px;
  font-weight: 700;
  color:       var(--sp-text);
  font-size:   0.95rem;
}

/* Secciones de estadística */
.sp-stat-section {
  margin-bottom: 18px;
  padding-top:   16px;
  border-top:    1px solid var(--sp-card-border);
}

.sp-stat-subtitle {
  color:         var(--sp-text);
  font-size:     0.87rem;
  font-weight:   600;
  margin-bottom: 12px;
}
.sp-stat-subtitle i { color: var(--sp-accent); margin-right: 6px; }

/* Badges de evaluación/recursos */
.sp-badges-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.sp-badge-item { display: flex; align-items: center; gap: 5px; }

.sp-badge {
  background:    rgba(66, 153, 225, 0.12);
  color:         var(--sp-accent-light);
  border:        1px solid rgba(66, 153, 225, 0.25);
  border-radius: 20px;
  padding:       4px 12px;
  font-size:     0.78rem;
}

.sp-badge-pct {
  color:       var(--sp-text-muted);
  font-size:   0.78rem;
  font-weight: 600;
}

/* Barras (lista) */
.sp-bars-wrap { display: flex; flex-direction: column; gap: 9px; }

.sp-bar-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.sp-bar-label {
  width:      140px;
  font-size:  0.78rem;
  color:      var(--sp-text-muted);
  flex-shrink: 0;
}

.sp-bar-track {
  flex:          1;
  height:        8px;
  background:    rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow:      hidden;
}

.sp-bar-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--sp-accent), var(--sp-accent-light));
  border-radius: 4px;
  transition:    width 0.7s ease;
}

.sp-bar-pct {
  width:       36px;
  text-align:  right;
  font-size:   0.78rem;
  color:       var(--sp-text);
  font-weight: 600;
}

/* Puntos (toggle result) */
.sp-stat-puntos {
  display:     flex;
  align-items: center;
  gap:         16px;
  flex-wrap:   wrap;
}
.sp-stat-puntos .sp-stat-subtitle { margin-bottom: 0; }

.sp-puntos-result { display: flex; gap: 12px; }

.sp-ptag {
  padding:       6px 18px;
  border-radius: 20px;
  font-size:     0.85rem;
}
.sp-ptag-si {
  background: rgba(104, 211, 145, 0.12);
  border:     1px solid rgba(104, 211, 145, 0.3);
  color:      var(--sp-green);
}
.sp-ptag-no {
  background: rgba(252, 129, 129, 0.12);
  border:     1px solid rgba(252, 129, 129, 0.3);
  color:      var(--sp-red);
}

/* ─────────────────────────────────────────────────────────────
   FORMULARIO DE VOTACIÓN
───────────────────────────────────────────────────────────── */
.sp-survey-wrap {
  background:    var(--sp-card);
  border:        1px solid var(--sp-card-border);
  border-radius: var(--sp-radius);
  padding:       24px 28px;
  margin-bottom: 20px;
  box-shadow:    var(--sp-shadow);
}

.sp-form-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom:  1px solid var(--sp-card-border);
}
.sp-form-section:last-of-type { border-bottom: none; margin-bottom: 0; }

.sp-form-section-title {
  color:         var(--sp-text);
  font-size:     0.95rem;
  font-weight:   600;
  margin-bottom: 14px;
}
.sp-form-section-title i { color: var(--sp-accent); margin-right: 6px; }

.sp-optional {
  font-size:   0.75rem;
  color:       var(--sp-text-muted);
  font-weight: 400;
}

/* Filas de estrella */
.sp-field-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         10px 14px;
  background:      rgba(255, 255, 255, 0.03);
  border:          1px solid var(--sp-card-border);
  border-radius:   var(--sp-radius-sm);
  margin-bottom:   8px;
}
.sp-field-row:last-child { margin-bottom: 0; }

.sp-field-label {
  color:     var(--sp-text);
  font-size: 0.88rem;
  flex:      1;
}
.sp-field-label i { color: var(--sp-accent); margin-right: 6px; }

/* Estrellas interactivas */
.sp-star-input { display: flex; gap: 5px; }

.sp-star-pick {
  font-size:  1.5rem;
  color:      var(--sp-star-empty);
  cursor:     pointer;
  transition: var(--sp-transition);
}
.sp-star-pick.hovered,
.sp-star-pick.selected {
  color:     var(--sp-star);
  transform: scale(1.2);
}

/* Checkboxes personalizados */
.sp-checkbox-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap:                   10px;
}
.sp-checkbox-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.sp-check-input { display: none; }

.sp-check-label {
  display:       flex;
  align-items:   center;
  gap:           10px;
  cursor:        pointer;
  padding:       9px 13px;
  border-radius: var(--sp-radius-sm);
  border:        1px solid rgba(255, 255, 255, 0.07);
  background:    rgba(255, 255, 255, 0.025);
  transition:    var(--sp-transition);
}
.sp-check-label:hover {
  border-color: var(--sp-accent);
  background:   rgba(66, 153, 225, 0.08);
}

.sp-check-box {
  width:        18px;
  height:       18px;
  border-radius: 4px;
  border:       2px solid var(--sp-star-empty);
  flex-shrink:  0;
  position:     relative;
  transition:   var(--sp-transition);
}
.sp-check-box::after {
  content:   '';
  position:  absolute;
  top:       1px;
  left:      5px;
  width:     5px;
  height:    9px;
  border:    2px solid #fff;
  border-top:  none;
  border-left: none;
  transform: rotate(45deg);
  opacity:   0;
  transition: opacity 0.15s;
}
.sp-check-input:checked + .sp-check-box {
  background:   var(--sp-accent);
  border-color: var(--sp-accent);
}
.sp-check-input:checked + .sp-check-box::after { opacity: 1; }
.sp-check-input:checked ~ .sp-check-text { color: var(--sp-accent-light); }

.sp-check-text {
  font-size: 0.84rem;
  color:     var(--sp-text-muted);
  transition: color 0.2s;
}

/* Radio buttons (lista) */
.sp-radio-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:                   10px;
}

.sp-radio-input { display: none; }

.sp-radio-btn {
  display:       block;
  text-align:    center;
  padding:       10px 14px;
  border-radius: var(--sp-radius-sm);
  border:        1px solid rgba(255, 255, 255, 0.08);
  background:    rgba(255, 255, 255, 0.03);
  color:         var(--sp-text-muted);
  font-size:     0.84rem;
  cursor:        pointer;
  transition:    var(--sp-transition);
}
.sp-radio-btn:hover {
  border-color: var(--sp-accent);
  color:        var(--sp-accent-light);
}
.sp-radio-input:checked + .sp-radio-btn {
  background:   rgba(66, 153, 225, 0.15);
  border-color: var(--sp-accent);
  color:        var(--sp-accent-light);
  font-weight:  600;
}

/* Toggle Sí/No */
.sp-toggle-wrap { display: flex; gap: 14px; }

.sp-toggle-btn {
  display:       block;
  text-align:    center;
  padding:       11px 36px;
  border-radius: var(--sp-radius-sm);
  border:        1px solid rgba(255, 255, 255, 0.08);
  background:    rgba(255, 255, 255, 0.03);
  color:         var(--sp-text-muted);
  font-size:     0.95rem;
  cursor:        pointer;
  transition:    var(--sp-transition);
}
.sp-radio-input:checked + .sp-toggle-yes {
  background:   rgba(104, 211, 145, 0.15);
  border-color: var(--sp-green);
  color:        var(--sp-green);
  font-weight:  600;
}
.sp-radio-input:checked + .sp-toggle-no-btn {
  background:   rgba(252, 129, 129, 0.15);
  border-color: var(--sp-red);
  color:        var(--sp-red);
  font-weight:  600;
}

/* ── SECCIÓN GENERAL 1-10 ── */
.sp-section-general {
  background:    linear-gradient(135deg, rgba(66,153,225,0.06), rgba(43,108,176,0.06));
  border:        1px solid rgba(66, 153, 225, 0.18) !important;
  border-radius: var(--sp-radius-sm);
  padding:       20px 20px 0;
}

.sp-general-title {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
  font-size: 1rem !important;
}

.sp-general-hint {
  color:     var(--sp-text-muted);
  font-size: 0.78rem;
  margin:    -6px 0 14px;
}

.sp-scale-10 {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
  padding-bottom: 20px;
}

.sp-scale-input { display: none; }

.sp-scale-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           46px;
  height:          46px;
  border-radius:   10px;
  border:          2px solid rgba(255, 255, 255, 0.1);
  background:      rgba(255, 255, 255, 0.04);
  color:           var(--sp-text-muted);
  font-size:       1rem;
  font-weight:     700;
  cursor:          pointer;
  transition:      var(--sp-transition);
  user-select:     none;
}
.sp-scale-btn:hover { transform: translateY(-3px); }

/* Colores por rango al hover/seleccionar */
.scale-bad.scale-hover,
.scale-bad.scale-selected      { background: var(--sp-red);    border-color: var(--sp-red);    color: #fff; }
.scale-mid.scale-hover,
.scale-mid.scale-selected      { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }
.scale-good.scale-hover,
.scale-good.scale-selected     { background: var(--sp-green);  border-color: var(--sp-green);  color: #fff; }
.scale-excellent.scale-hover,
.scale-excellent.scale-selected{ background: var(--sp-accent); border-color: var(--sp-accent); color: #fff; }

/* ── SUBMIT ── */
.sp-form-footer { margin-top: 22px; text-align: center; }

.sp-form-error {
  background:    rgba(252, 129, 129, 0.12);
  border:        1px solid rgba(252, 129, 129, 0.3);
  color:         var(--sp-red);
  padding:       10px 16px;
  border-radius: var(--sp-radius-sm);
  margin-bottom: 14px;
  font-size:     0.88rem;
}

.sp-submit-btn {
  background:    linear-gradient(135deg, var(--sp-accent), var(--sp-accent-dark));
  color:         #fff;
  border:        none;
  border-radius: 50px;
  padding:       14px 44px;
  font-size:     1rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    var(--sp-transition);
  box-shadow:    0 4px 16px rgba(66, 153, 225, 0.35);
  letter-spacing: 0.3px;
}
.sp-submit-btn:hover:not(:disabled) {
  transform:  translateY(-2px);
  box-shadow: 0 6px 22px rgba(66, 153, 225, 0.45);
}
.sp-submit-btn:disabled {
  opacity: 0.6;
  cursor:  not-allowed;
}

/* ── YA VOTASTE / ÉXITO ── */
.sp-already-voted,
.sp-success-msg {
  text-align: center;
  padding:    48px 20px;
  color:      var(--sp-text);
}
.sp-already-voted i,
.sp-success-msg i {
  font-size:     3.2rem;
  color:         var(--sp-green);
  display:       block;
  margin-bottom: 18px;
}
.sp-already-voted p,
.sp-success-msg p {
  font-size: 1rem;
  color:     var(--sp-text-muted);
  margin:    0;
}
.sp-success-sub {
  font-size:  0.82rem !important;
  margin-top: 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   COLUMNA "PUNTUACIÓN" EN ARCHIVOS DE CENTROS
───────────────────────────────────────────────────────────── */
.puntuacion-badge {
  display:       inline-flex;
  align-items:   baseline;
  gap:           2px;
  font-size:     1.05rem;
  font-weight:   700;
  padding:       3px 10px;
  border-radius: 6px;
  white-space:   nowrap;
}
.puntuacion-good    { color: #276749; background: #c6f6d5; }
.puntuacion-mid     { color: #7b341e; background: #feebc8; }
.puntuacion-bad     { color: #9b2c2c; background: #fed7d7; }
.puntuacion-empty   { color: #718096; font-size: 0.82rem; }
.puntuacion-max     { font-size: 0.68rem; font-weight: 400; opacity: 0.7; }

/* ─────────────────────────────────────────────────────────────
   CONTENIDO DEL POST & COMENTARIOS
───────────────────────────────────────────────────────────── */
.sp-content {
  background:    var(--sp-card);
  border:        1px solid var(--sp-card-border);
  border-radius: var(--sp-radius);
  padding:       24px 28px;
  margin-bottom: 20px;
  color:         var(--sp-text-muted);
  font-size:     0.92rem;
  line-height:   1.7;
}

.sp-comments-wrap {
  margin-top: 20px;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .sp-profesor-header { flex-direction: column; align-items: flex-start; }
  .sp-general-badge   { align-self: flex-start; }
  .sp-toggle-wrap     { flex-wrap: wrap; }
  .sp-scale-10        { gap: 6px; }
  .sp-scale-btn       { width: 40px; height: 40px; font-size: 0.9rem; }
  .sp-field-row       { flex-direction: column; align-items: flex-start; }
}

/* ── Estado vacío: sin calificaciones aún ── */
.sp-no-votes {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #cbd5e0;
}
.sp-no-votes i {
  display: block;
  font-size: 2.8rem;
  margin-bottom: 0.75rem;
  color: #90cdf4;
}
.sp-no-votes p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
}