/* =====================================================
   Medrando+ Área Cliente · estilos específicos
   Hereda de ../styles.css (paleta, tipografía, nav, hero, footer)
   ===================================================== */

/* Layout base de cada página área cliente */
.client-page{
  min-height:100vh;
  display:flex; flex-direction:column;
  position:relative;
}

/* Hero compacto para páginas de auth */
.client-hero{
  position:relative; overflow:hidden;
  padding:120px var(--pad) 50px;
  background:#050505;
}
.client-hero__title{
  font-size:clamp(36px, 6vw, 64px);
  font-weight:600; letter-spacing:-.035em; line-height:1;
  color:#fff; max-width:14ch;
}
.client-hero__title em{color:var(--teal); font-style:italic; font-weight:500}
.client-hero__sub{
  margin-top:14px; font-size:16px; color:#bdbdbd;
  max-width:60ch; line-height:1.55;
}

/* Container central para formularios */
.client-container{
  max-width:560px; margin:0 auto;
  padding:60px var(--pad) 100px;
  width:100%;
}

/* Formularios */
.form-card{
  background:#0B0B0B;
  border:1px solid #1F1F1F;
  border-radius:16px;
  padding:40px;
}
.form-card h2{
  font-size:clamp(24px, 3.2vw, 34px);
  font-weight:600; letter-spacing:-.025em; line-height:1.05;
  color:#fff; margin-bottom:8px;
}
.form-card .lead{
  color:#bdbdbd; line-height:1.55; font-size:15px;
  margin-bottom:30px;
}

.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.field label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  color:var(--gray); text-transform:uppercase;
}
.field label .req{color:var(--teal); margin-left:4px}
.field input, .field select, .field textarea{
  width:100%;
  background:#0a0a0a;
  border:1px solid #2a2a2a;
  border-radius:10px;
  padding:14px 16px;
  font-size:15px;
  color:#fff;
  font-family:inherit;
  transition:border-color .2s, background .2s;
}
.field textarea{min-height:90px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--teal);
  background:rgba(79,168,174,.05);
}
.field input::placeholder, .field textarea::placeholder{color:#5a5a5a}
.field .hint{font-size:13px; color:#7a7a7a; margin-top:-2px}

.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

/* Checkbox / RGPD */
.check{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; color:#bdbdbd; line-height:1.45;
  cursor:pointer;
}
.check input[type="checkbox"]{
  width:18px; height:18px; flex-shrink:0; margin-top:2px;
  accent-color:var(--teal);
  cursor:pointer;
}
.check a{color:var(--teal); border-bottom:1px solid var(--teal)}

/* Botón principal */
.btn-primary{
  width:100%;
  background:var(--teal);
  color:#fff;
  border:0; border-radius:10px;
  padding:16px 24px;
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.btn-primary:hover{background:#5BB6BC; transform:translateY(-1px)}
.btn-primary:disabled{opacity:.6; cursor:not-allowed; transform:none}

.btn-secondary{
  background:transparent; color:#fff;
  border:1px solid #2a2a2a; border-radius:10px;
  padding:14px 24px;
  font-size:14.5px; font-weight:500;
  cursor:pointer; transition:border-color .2s, color .2s;
}
.btn-secondary:hover{border-color:var(--teal); color:var(--teal)}

/* Alertas */
.alert{
  padding:14px 18px; border-radius:10px;
  font-size:14.5px; line-height:1.5;
  margin-bottom:18px;
  display:none;
}
.alert.is-visible{display:block}
.alert--error{background:rgba(220,60,60,.08); border:1px solid rgba(220,60,60,.4); color:#FFB6B6}
.alert--success{background:rgba(79,168,174,.08); border:1px solid rgba(79,168,174,.4); color:#A8E5E9}
.alert--info{background:rgba(255,255,255,.04); border:1px solid #2a2a2a; color:#cfcfcf}

/* Pie del form: links */
.form-foot{
  margin-top:24px;
  display:flex; flex-direction:column; gap:10px;
  font-size:14px; color:#8a8a8a; text-align:center;
}
.form-foot a{
  color:#fff; font-weight:500;
  border-bottom:1px solid var(--teal); padding-bottom:1px;
}
.form-foot a:hover{color:var(--teal)}

/* ─── Dashboard ────────────────────────────────── */
.dash{
  max-width:var(--maxw); margin:0 auto;
  padding:40px var(--pad) 100px;
}
.dash__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:30px; flex-wrap:wrap;
  border-bottom:1px solid #1F1F1F;
  padding-bottom:30px; margin-bottom:50px;
}
.dash__greeting{
  font-size:clamp(28px, 4vw, 48px); font-weight:600;
  letter-spacing:-.03em; line-height:1; color:#fff;
}
.dash__greeting em{color:var(--teal); font-style:italic}
.dash__email{
  font-family:var(--mono); font-size:13px; color:var(--gray);
  margin-top:10px; letter-spacing:.04em;
}
.dash__actions{display:flex; gap:12px; flex-wrap:wrap}

.dash__section{margin-bottom:60px}
.dash__section-title{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  color:var(--teal); text-transform:uppercase;
  margin-bottom:20px; display:flex; align-items:center; gap:10px;
}
.dash__section-title .count{
  background:rgba(79,168,174,.12); border:1px solid rgba(79,168,174,.4);
  color:#fff; padding:2px 8px; border-radius:99px;
  font-size:11px; letter-spacing:0;
}

/* Card del usuario */
.user-card{
  background:#0B0B0B; border:1px solid #1F1F1F;
  border-radius:14px; padding:28px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.user-card__field{display:flex; flex-direction:column; gap:6px}
.user-card__label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--gray); text-transform:uppercase}
.user-card__value{font-size:16px; font-weight:500; color:#fff}
.user-card__value.unverified{color:#FFB677}
@media (max-width:680px){.user-card{grid-template-columns:1fr; gap:18px}}

/* Cards de deportistas */
.deportistas-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}
.deportista-card{
  background:#0B0B0B; border:1px solid #1F1F1F;
  border-radius:14px; padding:24px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .2s, border-color .2s;
}
.deportista-card:hover{transform:translateY(-3px); border-color:var(--teal)}
.deportista-card__name{
  font-size:18px; font-weight:600; letter-spacing:-.01em; color:#fff;
}
.deportista-card__marca{
  display:inline-block; align-self:flex-start;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--teal); text-transform:uppercase;
  background:rgba(79,168,174,.08); border:1px solid rgba(79,168,174,.3);
  padding:4px 10px; border-radius:99px;
}
.deportista-card__meta{
  font-size:13px; color:#8a8a8a; line-height:1.55;
}

/* Empty state cuando no hay deportistas */
.empty-state{
  background:#0B0B0B; border:1px dashed #2a2a2a; border-radius:14px;
  padding:50px 30px; text-align:center;
}
.empty-state__title{
  font-size:18px; font-weight:500; color:#fff; margin-bottom:8px;
}
.empty-state__desc{color:#8a8a8a; font-size:14.5px; margin-bottom:20px}

/* Notification banner (toast estático) */
.banner{
  max-width:var(--maxw); margin:0 auto;
  padding:14px var(--pad);
}
.banner__inner{
  background:rgba(79,168,174,.08); border:1px solid rgba(79,168,174,.3);
  border-radius:10px; padding:14px 18px;
  display:flex; gap:12px; align-items:center;
  font-size:14.5px; color:#cfcfcf;
}
.banner__inner b{color:#fff}

/* Loading skeleton */
.loading-row{
  height:80px; background:#0B0B0B;
  border:1px solid #1F1F1F; border-radius:14px;
  margin-bottom:14px;
  background-image:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 50%, transparent 100%);
  background-size:200% 100%;
  animation:shimmerLoad 1.2s linear infinite;
}
@keyframes shimmerLoad{from{background-position:200% 0}to{background-position:-200% 0}}