:root{
  --teal:#2C7A6B;
  --teal-light:#51A38D;
  --teal-lighter:#DFF3EE;
  --yellow:#FCBD17;
  --yellow-dark:#E08E1D;
  --cream:#FFFBF0;
  --ink:#204F45;
  --danger:#E76F51;
}

*{box-sizing:border-box;}

body{
  font-family:'Baloo 2','Comic Sans MS','Trebuchet MS',sans-serif;
  background:linear-gradient(160deg,var(--teal-lighter) 0%,var(--cream) 60%);
  color:var(--ink);
  min-height:100vh;
}

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&display=swap');

/* ---------- Pantallas de acceso (login/registro) ---------- */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:radial-gradient(circle at 20% 20%, var(--teal-light) 0%, var(--teal) 55%, var(--ink) 100%);
}
.auth-card{
  background:var(--cream);
  border-radius:28px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  padding:36px;
  max-width:430px;
  width:100%;
  border:6px solid var(--yellow);
}
.auth-logo{width:90px;height:90px;border-radius:50%;display:block;margin:0 auto 12px;box-shadow:0 6px 16px rgba(0,0,0,.2);}
.auth-title{font-weight:800;color:var(--teal);text-align:center;font-size:1.6rem;margin-bottom:2px;}
.auth-subtitle{text-align:center;color:var(--yellow-dark);font-weight:700;margin-bottom:20px;}

.btn-mapa{
  background:var(--yellow);
  border:none;
  color:var(--ink);
  font-weight:800;
  border-radius:16px;
  padding:10px 18px;
  transition:.15s transform;
  box-shadow:0 4px 0 var(--yellow-dark);
}
.btn-mapa:hover{transform:translateY(-2px);color:var(--ink);}
.btn-mapa:active{transform:translateY(2px);box-shadow:0 1px 0 var(--yellow-dark);}

.btn-teal{
  background:var(--teal);
  border:none;
  color:#fff;
  font-weight:800;
  border-radius:16px;
  padding:10px 18px;
  box-shadow:0 4px 0 var(--ink);
}
.btn-teal:hover{color:#fff;transform:translateY(-2px);}

.form-control-mapa{
  border-radius:14px;
  border:2px solid var(--teal-light);
  padding:10px 14px;
  font-weight:600;
}
.form-control-mapa:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(252,189,23,.35);}

.link-mapa{color:var(--teal);font-weight:700;text-decoration:none;}
.link-mapa:hover{color:var(--yellow-dark);text-decoration:underline;}

.alert-mapa{border-radius:14px;font-weight:700;}

/* ---------- Layout general con menú lateral ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:230px;
  background:linear-gradient(180deg,var(--teal) 0%,var(--ink) 100%);
  color:#fff;
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}
.sidebar .brand{display:flex;align-items:center;gap:10px;margin-bottom:26px;}
.sidebar .brand img{width:46px;height:46px;border-radius:50%;}
.sidebar .brand span{font-weight:800;font-size:1.05rem;line-height:1.05;}
.sidebar a{
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-radius:14px;
  font-weight:700;
  margin-bottom:6px;
  opacity:.9;
}
.sidebar a:hover, .sidebar a.active{background:rgba(255,255,255,.18);opacity:1;}
.sidebar .mi-avatar{
  margin-top:auto;
  background:rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px;
  text-align:center;
}
.sidebar .mi-avatar .emoji{font-size:2rem;}

.main-content{flex:1;padding:28px 34px;}
.topbar-mobile{display:none;}

@media (max-width:820px){
  .sidebar{position:fixed;left:-260px;z-index:50;transition:.2s;box-shadow:0 0 30px rgba(0,0,0,.3);}
  .sidebar.open{left:0;}
  .app-shell{flex-direction:column;}
  .topbar-mobile{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--teal);color:#fff;padding:14px 18px;
  }
  .topbar-mobile button{background:none;border:none;color:#fff;font-size:1.5rem;}
  .main-content{padding:18px;}
}

/* ---------- Tarjetas de niveles ---------- */
.nivel-card{
  border-radius:24px;
  padding:24px;
  color:#fff;
  position:relative;
  overflow:hidden;
  min-height:230px;
  box-shadow:0 12px 26px rgba(0,0,0,.15);
  transition:.15s transform;
}
.nivel-card.desbloqueado{cursor:pointer;}
.nivel-card.desbloqueado:hover{transform:translateY(-6px);}
.nivel-card.bloqueado{filter:grayscale(.6);opacity:.65;cursor:not-allowed;}
.nivel-card .icono{font-size:3rem;}
.nivel-card .candado{position:absolute;top:16px;right:18px;font-size:1.6rem;}
.nivel-card .progreso-barra{
  background:rgba(255,255,255,.35);
  border-radius:10px;
  height:12px;
  overflow:hidden;
  margin-top:14px;
}
.nivel-card .progreso-barra > div{background:var(--yellow);height:100%;}

/* ---------- Camino de actividades (mapa de niveles) ---------- */
.camino{
  display:flex;
  flex-wrap:wrap;
  gap:26px;
  padding:20px 0;
  position:relative;
}
.nodo-actividad{
  width:150px;
  text-align:center;
  text-decoration:none;
  color:var(--ink);
}
.nodo-circulo{
  width:90px;height:90px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  margin:0 auto 8px;
  border:5px solid var(--yellow);
  background:#fff;
  box-shadow:0 8px 16px rgba(0,0,0,.15);
  transition:.15s transform;
}
.nodo-actividad.completada .nodo-circulo{background:var(--teal-light);color:#fff;border-color:var(--teal);}
.nodo-actividad.bloqueada .nodo-circulo{background:#e2e2e2;border-color:#bbb;color:#999;}
.nodo-actividad:hover .nodo-circulo{transform:scale(1.07);}
.nodo-titulo{font-weight:700;font-size:.85rem;}
.nodo-puntaje{font-size:.75rem;color:var(--yellow-dark);font-weight:800;}
.nodo-repetir{font-size:.72rem;color:var(--teal);font-weight:700;margin-top:2px;}

/* ---------- Avatares ---------- */
.avatar-opcion{
  border:4px solid transparent;
  border-radius:20px;
  padding:18px;
  text-align:center;
  cursor:pointer;
  background:#fff;
  transition:.15s;
}
.avatar-opcion:hover{transform:translateY(-4px);}
.avatar-opcion.selected{border-color:var(--yellow);background:var(--teal-lighter);}
.avatar-opcion .emoji{font-size:3.2rem;}

/* ---------- Actividad / preguntas ---------- */
.narrativa-box{
  background:#fff;
  border-left:6px solid var(--yellow);
  border-radius:14px;
  padding:18px 20px;
  font-style:italic;
  margin-bottom:20px;
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.narrativa-box > .btn-audio{flex-shrink:0;margin-top:2px;}
.pregunta-card{
  background:#fff;
  border-radius:20px;
  padding:22px;
  margin-bottom:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.opcion-btn{
  display:block;
  width:100%;
  text-align:left;
  border:2px solid var(--teal-light);
  background:#fff;
  border-radius:14px;
  padding:12px 16px;
  margin-bottom:10px;
  font-weight:600;
  cursor:pointer;
}
.opcion-btn:hover{background:var(--teal-lighter);}
.opcion-btn.correcta{background:#d7f5df;border-color:#4caf50;}
.opcion-btn.incorrecta{background:#fbdedb;border-color:var(--danger);}
.opcion-btn:disabled{cursor:default;}

.feedback-box{
  border-radius:14px;
  padding:14px 16px;
  font-weight:700;
  margin-top:10px;
  display:none;
}
.feedback-box.correcto{background:#d7f5df;color:#256029;display:block;}
.feedback-box.incorrecto{background:#fbdedb;color:#9c3b2c;display:block;}

/* ---------- Preguntas de tipo "ordenar" ---------- */
.ordenar-lista{display:flex;flex-direction:column;gap:10px;}
.ordenar-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  border:2px solid var(--teal-light);
  background:#fff;
  border-radius:14px;
  padding:12px 16px;
  font-weight:600;
  cursor:pointer;
}
.ordenar-item:hover{background:var(--teal-lighter);}
.ordenar-item.marcado{background:var(--teal-lighter);border-color:var(--teal);cursor:default;}
.ordenar-badge{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--yellow);
  color:var(--ink);
  font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--yellow-dark);
}
.ordenar-item:not(.marcado) .ordenar-badge{background:#fff;border:2px dashed #bbb;}
.pregunta-card.ordenar-correcta{box-shadow:0 0 0 3px #4caf50 inset;}
.pregunta-card.ordenar-incorrecta{box-shadow:0 0 0 3px var(--danger) inset;}
.btn-reiniciar-orden{border-radius:10px;font-weight:700;}

#temporizador{
  background:var(--yellow);
  color:var(--ink);
  border-radius:14px;
  padding:8px 16px;
  font-weight:800;
  display:inline-block;
}

/* ---------- Ranking ---------- */
.ranking-item{
  display:flex;align-items:center;gap:14px;
  background:#fff;border-radius:16px;padding:12px 18px;margin-bottom:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.ranking-pos{font-weight:800;font-size:1.2rem;color:var(--teal);width:34px;}
.ranking-item.top1{border:3px solid var(--yellow);}

/* ---------- Botón de lectura en voz alta (accesibilidad) ---------- */
.btn-audio{
  background:var(--teal);
  color:#fff;
  border:none;
  border-radius:50%;
  width:38px;
  height:38px;
  min-width:38px;
  font-size:1.1rem;
  cursor:pointer;
  box-shadow:0 3px 0 var(--ink);
  transition:.15s transform;
}
.btn-audio:hover{transform:scale(1.08);}
.btn-audio:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink);}
.btn-audio.leyendo{
  background:var(--yellow);
  color:var(--ink);
  animation:pulso-audio 0.9s infinite;
}
@keyframes pulso-audio{
  0%,100%{box-shadow:0 3px 0 var(--yellow-dark), 0 0 0 0 rgba(252,189,23,.5);}
  50%{box-shadow:0 3px 0 var(--yellow-dark), 0 0 0 8px rgba(252,189,23,0);}
}

/* ============================================================
   ACCESIBILIDAD: botón flotante, panel, modo oscuro, alto contraste,
   tamaño de texto
   ============================================================ */
.btn-accesibilidad{
  position:fixed;
  bottom:22px;
  right:22px;
  z-index:1000;
  width:54px;
  height:54px;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
  border:none;
  font-size:1.5rem;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  cursor:pointer;
}
.btn-accesibilidad:hover{transform:scale(1.06);}

.panel-accesibilidad{
  position:fixed;
  bottom:86px;
  right:22px;
  z-index:1000;
  background:#fff;
  border-radius:18px;
  padding:18px;
  width:230px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  border:3px solid var(--yellow);
  display:none;
}
.panel-accesibilidad.abierto{display:block;}

/* --- Modo oscuro --- */
html.modo-oscuro body{background:linear-gradient(160deg,#16332c 0%,#0f211c 60%);color:#EAF5F1;}
html.modo-oscuro .pregunta-card,
html.modo-oscuro .narrativa-box,
html.modo-oscuro .ranking-item,
html.modo-oscuro .auth-card,
html.modo-oscuro .admin-stat,
html.modo-oscuro .admin-table,
html.modo-oscuro .panel-accesibilidad{
  background:#1c3d35;color:#EAF5F1;
}
html.modo-oscuro .opcion-btn{background:#234a40;color:#EAF5F1;border-color:var(--teal-light);}
html.modo-oscuro .opcion-btn:hover{background:#2b5a4d;}
html.modo-oscuro .ordenar-item{background:#234a40;color:#EAF5F1;border-color:var(--teal-light);}
html.modo-oscuro .ordenar-item.marcado{background:#2b5a4d;}
html.modo-oscuro .form-control-mapa{background:#234a40;color:#EAF5F1;border-color:var(--teal-light);}
html.modo-oscuro .form-control-mapa::placeholder{color:#bcd8d0;}
html.modo-oscuro .nodo-actividad{color:#EAF5F1;}
html.modo-oscuro .nodo-circulo{background:#234a40;}
html.modo-oscuro .link-mapa{color:var(--yellow);}
html.modo-oscuro .table{color:#EAF5F1;}
html.modo-oscuro .table-light, html.modo-oscuro .table-light>th{background:#234a40;color:#EAF5F1;}

/* --- Alto contraste --- */
html.alto-contraste body{background:#000;color:#fff;}
html.alto-contraste .pregunta-card,
html.alto-contraste .narrativa-box,
html.alto-contraste .ranking-item,
html.alto-contraste .auth-card,
html.alto-contraste .nivel-card,
html.alto-contraste .admin-stat,
html.alto-contraste .admin-table,
html.alto-contraste .panel-accesibilidad{
  background:#000;color:#fff;border:2px solid #fff;box-shadow:none;
}
html.alto-contraste .opcion-btn{background:#000;color:#fff;border:3px solid #fff;font-weight:800;}
html.alto-contraste .opcion-btn:hover{background:#fff;color:#000;}
html.alto-contraste .ordenar-item{background:#000;color:#fff;border:3px solid #fff;font-weight:800;}
html.alto-contraste .ordenar-item.marcado{background:#333;}
html.alto-contraste .ordenar-badge{background:#FFDD00;color:#000;border-color:#000;}
html.alto-contraste .btn-mapa, html.alto-contraste .btn-teal, html.alto-contraste .btn-audio{
  background:#FFDD00;color:#000;border:3px solid #000;box-shadow:none;font-weight:800;
}
html.alto-contraste .sidebar{background:#000;border-right:3px solid #fff;}
html.alto-contraste .sidebar a{color:#FFDD00;}
html.alto-contraste .sidebar a:hover, html.alto-contraste .sidebar a.active{background:#333;}
html.alto-contraste .form-control-mapa{background:#000;color:#fff;border:3px solid #fff;}
html.alto-contraste .link-mapa{color:#FFDD00;text-decoration:underline;}
html.alto-contraste .feedback-box.correcto{background:#003300;color:#00ff00;border:2px solid #00ff00;}
html.alto-contraste .feedback-box.incorrecto{background:#330000;color:#ff5555;border:2px solid #ff5555;}

/* --- Tamaño de texto --- */
html.texto-grande body{font-size:1.18rem;}
html.texto-grande .opcion-btn{font-size:1.1rem;padding:15px 18px;}
html.texto-grande .nodo-titulo{font-size:1rem;}
html.texto-mas-grande body{font-size:1.4rem;}
html.texto-mas-grande .opcion-btn{font-size:1.3rem;padding:18px 20px;}
html.texto-mas-grande h2{font-size:2rem;}
html.texto-mas-grande .nodo-titulo{font-size:1.1rem;}

/* ---------- Confeti / celebración ---------- */
.confeti-emoji{position:fixed;top:-40px;font-size:1.6rem;animation:caer linear forwards;z-index:999;}
@keyframes caer{to{transform:translateY(110vh) rotate(360deg);opacity:.2;}}