/* ---------- VARIABLES ---------- */
:root{
  --bg:#101010; /* #010615  #0A1931 */
  --light:#ffffff;
  --muted:#AAB8D4;
}

/* ---------- RESET & BASE ---------- */
html,body{
  margin:0;padding:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);color:var(--light);
} 

/* ---------- BOTÓN HAMBURGUESA ---------- */
.hamburger{
  position:fixed;
  top:11px;right:11px;
  width:22px;height:17px;
  background:none;border:none;padding:0;
  display:flex;flex-direction:column;justify-content:space-between;
  cursor:pointer;z-index:1000;
}
.hamburger .bar{
  width:100%;height:1px;
  background:var(--light);border-radius:2px;
  transition:background .3s ease;
}
.hamburger:hover .bar{background:var(--muted);}
.hamburger:focus-visible{outline:2px solid var(--light);outline-offset:4px;}

/* ---------- HEADER ---------- */
.user-header{
  display:flex;flex-direction:column;align-items:center;
  padding:24px 16px 0;
}
.profile-avatar{
  width:96px;height:96px;border-radius:50%;
  object-fit:cover;border:3px solid var(--light);background:#ccc;
}
.username{margin-top:12px;font-size:1.25rem;font-weight:700;text-align:center;}

/* --- NUEVO: contenedor username + botón --- */
.username-wrapper{
  margin-top:12px;
  font-size:1.25rem;
  font-weight:700;
  text-align:center;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
/* texto se mantiene blanco */
.username-wrapper .username{
  display:inline-block;
}

/* --- Botón minimalista lápiz --- */
.edit-btn{
  background:transparent;
  border:none;
  padding:2px;
  color:var(--light);
  cursor:pointer;
  display:flex;
  align-items:center;
  transition:opacity .25s;
  position:relative;   /* le permite moverse sin romper el flujo */
  top:5px;             /* ↓ baja 4 px; ajusta a tu gusto */
  line-height:0;       /* evita heredado del wrapper */

}

.edit-btn svg{
  display:block;               /* quita posible espacio inline */
}

.edit-btn:hover,
.edit-btn:focus-visible{
  opacity:.75;               /* feedback sutil */
  outline:none;
}
.edit-btn svg rect{          /* la linecita débil */
  opacity:.55;
}


/* ---------- MÉTRICAS RÁPIDAS ---------- */
.stats-grid{
  list-style:none;padding:0;margin-top:12px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px;
  width:100%;max-width:320px;
}
.stat{display:flex;flex-direction:column;align-items:center;cursor:pointer;}
.stat-number{font-weight:700;font-size:1rem;}
.stat-label{font-size:.75rem;color:var(--muted);}
.stat-toggle{grid-column:1/-1;text-align:center;}
.stats-toggle{background:transparent;border:none;font-size:1.2rem;color:var(--light);cursor:pointer;}
.extra{display:none;}
.stats-grid.expanded .extra{display:flex;}
.stats-grid.expanded .stats-toggle{transform:rotate(180deg);}

/* ---------- BLOQUE DIAMANTES ---------- */
.diamond-box{
  display:flex;justify-content:center;align-items:center;
  gap:16px;margin:24px auto 12px;max-width:320px;
}
.diamond-icon{width:56px;height:56px;filter:drop-shadow(0 0 4px rgba(0,0,0,.4));}
.diamond-data{display:flex;flex-direction:column;gap:4px;}
.diamond-line{display:flex;align-items:baseline;gap:6px;}
.diamond-num{font-size:1.4rem;font-weight:700;}
.diamond-label{font-size:.75rem;color:var(--muted);}

/* ---------- TABS ---------- */
.tabs{position:sticky;top:0;z-index:999;display:flex;background:var(--bg);border-bottom:1px solid rgba(255,255,255,.15);}
.tab{flex:1;padding:12px 0;text-align:center;font-weight:600;color:var(--light);background:transparent;border:none;cursor:pointer;border-bottom:3px solid transparent;}
.tab.active{border-color:var(--light);}
.tab:hover{background:rgba(255,255,255,.05);}

/* ---------- CONTENIDO ---------- */
main{padding:16px;}
.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* ---------- RANK CARD ---------- */
.rank-card{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:320px;margin:0 auto 24px;
}
.rank-card img{width:80px;height:80px;object-fit:contain;}
.rank-title{font-size:1.2rem;font-weight:700;text-align:center;}

/* barra */
.rank-progress{
  width:100%;height:10px;border-radius:5px;overflow:hidden;
  background:rgba(255,255,255,.15);
}
.rank-progress .fill{
  height:100%;width:0%;
  transition:width .6s ease;
}

/* ---------- GRÁFICAS ---------- */
.chart-wrapper{text-align:center;margin-top:24px;}
.chart-wrapper h3{margin-bottom:10px;font-size:1rem;font-weight:700;}

/* ---------- RESPONSIVE ---------- */
@media(min-width:768px){
  .profile-avatar{width:120px;height:120px;}
  .username{font-size:1.5rem;}
  .username-wrapper{font-size:1.5rem;}
  .stat-number{font-size:1.1rem;}
  .diamond-icon{width:70px;height:70px;}
}


.action-btn{
  flex:1;padding:8px 12px;font-size:.9rem;font-weight:600;
  border:2px solid var(--light);border-radius:10px;background:transparent;color:var(--light);
  cursor:pointer;transition:background .3s;
}


.action-btn.secondary{
  border-color:var(--muted);       /* gris aclarado */
}

.action-btn:hover{
  background:var(--light);
  color:var(--bg);
}

.action-icon{
  width:46px;
  min-width:46px;
  height:46px;
  border:2px solid var(--light);   /* ← nuevo */
  border-radius:12px;
  background:transparent;          /* ← nuevo */
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .3s, color .3s;
  color:var(--light);              /* asegurar */
}


.action-icon:hover{
  background:var(--light);
  color:var(--bg);
}

/* ======= Eliminar cambio de color cuando se presiona ======= */
.action-btn:active,
.action-icon:active{
  background:transparent !important;   /* sin relleno */
  color:var(--light)  !important;       /* texto/icono siguen blancos */
  border-color:var(--light) !important; /* contorno intacto */
}

/* Variante secundaria conserva su borde gris */
.action-btn.secondary:active{
  border-color:var(--muted) !important;
}

/* Evita el flash azul en móviles WebKit al tocar */
.action-btn,
.action-icon{
  -webkit-tap-highlight-color:transparent;
}


/* ---------- MODAL ---------- */
.modal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);z-index:2000;
}
.modal.hidden{display:none;}
.modal-box{
  width:90%;max-width:380px;background:#162447;border-radius:14px;
  padding:24px 20px;color:#fff;box-shadow:0 0 12px rgba(0,0,0,.4);
}
.modal-box h3{margin-top:0;margin-bottom:14px;text-align:center;}
.field{display:block;margin-bottom:14px;font-size:.85rem;}
.field input[type="text"],
.field input[type="file"]{
  width:100%;margin-top:6px;border-radius:8px;border:none;padding:8px;
  background:#0f3057;color:#fff;
}
.avatar-preview{
  width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 16px;
  border:3px solid #fff;
}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;}
.modal-btn{
  padding:8px 14px;border:none;border-radius:8px;font-weight:600;
  cursor:pointer;
}
.modal-btn.secondary{background:#444;color:#fff;}
.modal-btn{background:#00a8cc;color:#fff;}
.modal-btn:disabled{opacity:.6;cursor:not-allowed;}


/* ====== PANTALLA COMPLETA EDITAR PERFIL =================== */
.edit-screen{
  position:fixed; inset:0; z-index:3000;
  background:#000;           /* usa var(--bg) si quieres */
  color:#fff; display:flex;
  flex-direction:column;
  transform:translateX(100%); /* fuera de vista */
  transition:transform .35s ease;
}
.edit-screen.show{transform:translateX(0);} /* ← visible */

.edit-header{
  height:56px; display:flex; align-items:center;
  padding:0 16px; gap:16px;
  font-size:1.1rem; font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.edit-back{
  background:none; border:none; color:#fff;
  font-size:1.4rem; cursor:pointer;
}
.edit-body{
  flex:1; overflow-y:auto; padding:24px 20px 96px;
  display:flex; flex-direction:column; gap:24px;
}


/* --- Avatar --- */
.avatar-wrapper{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px;}
.avatar-box img{
  width:100%;
  height:100%;
  border-radius:inherit;  /* hereda 50 % */
  object-fit:cover;
  border:none;            /* ya no hace falta borde aquí */
}


.avatar-btn{
  position:absolute;          /* ocupa TODO el círculo */
  inset:0;
  border-radius:50%;
  background:rgba(0,0,0,.45); /* oscurece solo la foto */
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.6));

  padding:0;                   /* ➌ SIN espacios internos */
}

/* centra el SVG con precisión */
.avatar-btn svg{
  width:26px;
  height:26px;
  pointer-events:none;         /* evita que el tap se quede en el SVG */
}


.avatar-hint{
  margin-top:12px;   /* separación deseada bajo el círculo */
  font-size:.9rem;
  color:#bbb;
  pointer-events:none; /* que nunca sea clicable */
}


/* NUEVO ▸ caja que contiene SOLO el círculo */
.avatar-box{
  position:relative;
  width:110px;          /* ya lo tenías */
  height:110px;
  border:3px solid #fff;   /* <-- mueve el borde aquí */
  border-radius:50%;
  overflow:hidden;         /* <-- importantísimo: recorta ripple */
}


/* --- Fila editable --- */
.edit-row{
  width:100%; background:none; border:none;
  padding:16px 0; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.07);
  cursor:pointer; color:#fff; font-size:1rem;
}
.row-value{color:#888; font-size:.95rem; max-width:60%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.edit-row svg{flex:0 0 auto;}

@media(min-width:768px){
  .edit-body{padding:32px 28%;}
}

/* --- Footer con botón Guardar --- */
.edit-footer{
  position:sticky; bottom:56px; left:0; right:0;  /* ← súbelo unos px */
  background:#000; padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:center;
}

.edit-save{
  min-width:160px; padding:10px 18px;
  font-weight:600; font-size:1rem;
  border:none; border-radius:26px;
  color:#fff; background:#00a8cc;
  cursor:pointer; transition:opacity .25s;
}
.edit-save:disabled{opacity:.5; cursor:not-allowed;}
.edit-save:hover:not(:disabled){opacity:.85;}


/* === Back button: mismo look que ranking === */
.back-btn{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: #9c9c9c;                 /* usa currentColor del SVG */
}
.back-btn:focus-visible{ outline: 2px solid #2563eb; }
.icon-back{ width: 30px; height: 30px; }

/* Si ya tenías estilo para .edit-back, lo armonizamos aquí */
.edit-header{
  display: flex; align-items: center; gap: 8px;   /* asegura alineado limpio */
}
.edit-header h2{
  margin: 0;                                      /* título sin desplazamientos raros */
  flex: 1;                                        /* que el título ocupe y quede centrado si tu layout lo permite */
  text-align: center;                             
}
/* Ajuste específico del color dentro del header (puedes poner #fff si tu header es oscuro) */
.edit-header .back-btn{ color: #9c9c9c; }

/* Microajuste horizontal del título del overlay */
.edit-header h2{
  transform: translateX(-15px); /* mueve 10px a la izquierda */
}

/* —— Donut legend (debajo de la dona) —— */
.donut-legend{
  display:grid;
  gap:10px 16px;
  grid-template-columns: 1fr 1fr;
  max-width:420px;
  margin:10px auto 0;
}
@media(min-width:640px){
  .donut-legend{ grid-template-columns: 1fr 1fr 1fr; }
}
.dleg-item{ display:flex; align-items:center; gap:10px; }
.dleg-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.dleg-txt{ line-height:1.15; }
.dleg-l1{ font-weight:700; font-size:.95rem; }
.dleg-l2{ font-size:.82rem; color:var(--muted); }

/* Asegura que el canvas quede centrado y con aire */
#chartMaterias{ display:block; margin:0 auto; }

/* (opcional) fino separador bajo el wrapper para destacar la sección */
.chart-wrapper{ padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.08); }

/* ===== Barras: limitar ancho solo en pantallas grandes ===== */
@media (min-width: 1024px){
  /* ancho cómodo en laptop */
  .bar-chart{
    max-width: 720px;     /* ajusta a 680–760 si quieres */
    margin-left: auto;
    margin-right: auto;
  }
  .bar-chart canvas{
    width: 100% !important;   /* Chart.js ocupa el contenedor */
    height: auto !important;  /* deja que mantenga aspecto */
  }
}
@media (min-width: 1280px){
  /* un poquito más en monitores grandes */
  .bar-chart{ max-width: 780px; }
}
@media (min-width: 1536px){
  /* y en ultra-wide, pero sin desbordarse */
  .bar-chart{ max-width: 840px; }
}

/* ===== Overlay de carga de la página ===== */
.loader-overlay{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 9999;                 /* por encima de todo */
  opacity: 1;
  transition: opacity .25s ease;
}
.loader-overlay.hide{
  opacity: 0;
  pointer-events: none;          /* deja de bloquear clics */
}

.loader-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: translateY(-8vh);   /* un pelín arriba para verse más "centrado" */
}

.loader-spinner{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #00a8cc;     /* tu color de marca */
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loader-text{
  font-weight: 600;
  letter-spacing: .3px;
  color: #fff;
  font-size: .95rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Accesibilidad: menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .loader-spinner{ animation: none; border-top-color: rgba(255,255,255,.85); }
}