/* ============================================
   Estilos para login / registro / panel de alumnos
   Reutiliza los tokens definidos en style.css
   ============================================ */

.auth-page{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  background: var(--concrete);
  padding: 40px 20px;
}
.auth-card{
  width: 100%; max-width: 420px;
  background: var(--concrete-soft);
  border-radius: var(--radius);
  padding: 40px 32px;
  border: 1px solid rgba(237,234,226,.1);
}
.auth-logo{ display:block; height: 40px; width:auto; margin: 0 auto 28px; }
.auth-title{
  font-family: var(--font-display); color: var(--chalk);
  font-size: 1.8rem; text-align:center; margin: 0 0 8px;
}
.auth-sub{ color: var(--steel); text-align:center; font-size:.9rem; margin: 0 0 28px; }
.auth-form{ display:flex; flex-direction:column; gap: 16px; }
.auth-form label{
  font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color: var(--steel); display:block; margin-bottom:6px;
}
.auth-form input, .auth-form select{
  width:100%; font-family: var(--font-body); font-size:1rem; color: var(--chalk);
  background: var(--concrete); border: 1px solid rgba(237,234,226,.15);
  border-radius: var(--radius); padding: 12px 14px; box-sizing:border-box;
}
.auth-form input:focus, .auth-form select:focus{ outline:none; border-color: var(--iron); }
.auth-form .btn{ border:none; cursor:pointer; margin-top:8px; width:100%; text-align:center; }
.auth-msg{
  font-family: var(--font-mono); font-size:.82rem; text-align:center;
  padding: 10px; border-radius: var(--radius); display:none;
}
.auth-msg.is-error{ display:block; background: rgba(11,17,255,.12); color:#8fa0ff; }
.auth-msg.is-ok{ display:block; background: rgba(74,78,255,.15); color: var(--chalk); }
.auth-switch{ text-align:center; margin-top:22px; font-size:.85rem; color: var(--steel); }
.auth-switch a{ color: var(--iron); border-bottom:1px solid var(--iron); }

/* ---------- panel ---------- */
.panel-header{
  background: var(--concrete); border-bottom: 1px solid rgba(237,234,226,.08);
  padding: 18px 0;
}
.panel-header-inner{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.panel-header .brand-logo{ height:40px; }
.panel-welcome{
  font-family: var(--font-mono); color: var(--chalk-dim); font-size:.85rem;
  margin-right:auto;
}
.panel-welcome strong{ color: var(--chalk); }
.panel-role-badge{
  font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; background: var(--iron); color: var(--chalk);
  padding: 4px 10px; border-radius: var(--radius); margin-left:8px;
}
.panel-logout{
  font-family: var(--font-mono); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.05em; color: var(--steel); border:1px solid var(--steel);
  padding: 8px 16px; border-radius: var(--radius); background:none; cursor:pointer;
}
.panel-logout:hover{ color: var(--chalk); border-color: var(--chalk); }

.panel-main{ background: var(--chalk); min-height: calc(100vh - 78px); padding: 48px 0 80px; }

.panel-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.panel-tab{
  font-family: var(--font-mono); font-size:.85rem; text-transform:uppercase;
  letter-spacing:.05em; padding: 12px 22px; border-radius: var(--radius);
  border: 2px solid var(--concrete); background:none; color: var(--concrete);
  cursor:pointer;
}
.panel-tab.is-active{ background: var(--concrete); color: var(--chalk); }
.panel-panel{ display:none; }
.panel-panel.is-active{ display:block; }

.panel-section-title{ font-family: var(--font-display); font-size:1.8rem; margin: 0 0 8px; }
.panel-section-lead{ color: var(--steel); margin: 0 0 32px; max-width:620px; }

/* pesos */
.weight-form{
  display:grid; grid-template-columns: repeat(4, 1fr) auto; gap:14px; align-items:end;
  background: var(--concrete); padding:24px; border-radius: var(--radius); margin-bottom:32px;
}
.weight-form label{
  font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--steel); display:block; margin-bottom:6px;
}
.weight-form input, .weight-form select{
  width:100%; padding:10px; border-radius: var(--radius); border:1px solid rgba(237,234,226,.15);
  background: var(--concrete-soft); color: var(--chalk); box-sizing:border-box;
}
.weight-form .btn{ border:none; cursor:pointer; padding:10px 22px; }
@media (max-width: 900px){ .weight-form{ grid-template-columns:1fr; } }

.data-table{ width:100%; border-collapse:collapse; margin-bottom:16px; }
.data-table th, .data-table td{
  text-align:left; padding: 12px 14px; border-bottom: 1px solid rgba(32,31,29,.1);
  font-family: var(--font-mono); font-size:.85rem;
}
.data-table th{ text-transform:uppercase; letter-spacing:.05em; color: var(--steel); font-size:.7rem; }
.data-table .row-delete{ color: var(--iron); cursor:pointer; background:none; border:none; font-family:var(--font-mono); font-size:.78rem; }
.data-table .col-right{ text-align: right; }

.staff-panel{
  margin-top:48px; padding-top:32px; border-top: 2px dashed rgba(32,31,29,.15);
}
.staff-panel select{
  padding:10px 14px; border-radius: var(--radius); border:1px solid rgba(32,31,29,.2);
  font-family: var(--font-body); min-width:260px;
}

/* pulse experience */
.pulse-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; }
@media (max-width:900px){ .pulse-grid{ grid-template-columns:1fr; } }
.pulse-form{ display:flex; flex-direction:column; gap:16px; }
.pulse-form label{ font-family: var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color: var(--steel); }
.pulse-form input, .pulse-form select{
  width:100%; padding:12px; border-radius: var(--radius); border:1px solid rgba(32,31,29,.2);
  box-sizing:border-box; font-family: var(--font-body); font-size:1rem;
}
.pulse-form .btn{ border:none; cursor:pointer; align-self:flex-start; }
.pulse-zones{ background: var(--concrete); border-radius: var(--radius); padding:24px; color: var(--chalk); }
.pulse-zones h3{ font-family: var(--font-display); margin:0 0 18px; font-size:1.2rem; }
.zone-row{ display:flex; justify-content:space-between; padding:12px 14px; border-radius: var(--radius); margin-bottom:8px; font-family: var(--font-mono); font-size:.85rem; font-weight:600; }
.zone-row:last-child{ margin-bottom:0; }
.zone-row.zone-1{ background:#6b7280; color:#fff; }
.zone-row.zone-2{ background:#22c55e; color:#0A0A0A; }
.zone-row.zone-3{ background:#eab308; color:#0A0A0A; }
.zone-row.zone-4{ background:#f97316; color:#0A0A0A; }
.zone-row.zone-5{ background:#ef4444; color:#fff; }
.pulse-disclaimer{ font-size:.78rem; color: var(--steel); margin-top:18px; }
.pulse-empty{ color: var(--steel); font-size:.9rem; }

/* m8 training */
.m8-card{
  background: var(--concrete); color: var(--chalk); border-radius: var(--radius);
  padding: 48px; text-align:center; max-width:640px; margin:0 auto;
}
.m8-card h3{ font-family: var(--font-display); font-size:1.6rem; margin:0 0 12px; }
.m8-card p{ color: var(--chalk-dim); margin:0 0 24px; }