/* ============================================================
   DETECTIVE DE DATOS — Estilos globales
   Paleta: #F5F7FA fondo | #2C3E50 texto | #3498DB azul | #2ECC71 verde
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---- Variables ---- */
:root {
  --bg:       #F5F7FA;
  --surface:  #FFFFFF;
  --dark:     #2C3E50;
  --blue:     #3498DB;
  --blue-d:   #217dbb;
  --green:    #2ECC71;
  --green-d:  #27ae60;
  --red:      #E74C3C;
  --gray:     #7F8C8D;
  --gray-l:   #ECF0F1;
  --gold:     #F1C40F;
  --radius:   12px;
  --shadow:   0 4px 20px rgba(44,62,80,.10);
  --shadow-h: 0 8px 32px rgba(44,62,80,.18);
  --trans:    .22s ease;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--dark);line-height:1.6;min-height:100vh}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
img{max-width:100%}
button,input,select,textarea{font-family:inherit}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--gray-l)}
::-webkit-scrollbar-thumb{background:var(--blue);border-radius:4px}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrapper{display:flex;min-height:100vh}

/* ---- SIDEBAR ---- */
.sidebar{
  width:260px;min-width:260px;background:var(--dark);color:#fff;
  display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;
  transition:transform var(--trans);
}
.sidebar__logo{
  padding:28px 24px 20px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar__logo-icon{font-size:2rem;}
.sidebar__logo-text{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.1rem;line-height:1.2}
.sidebar__logo-sub{font-size:.72rem;opacity:.55;font-weight:400}

.sidebar__user{
  padding:16px 24px;background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:10px;
}
.sidebar__user-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;flex-shrink:0;
}
.sidebar__user-name{font-size:.85rem;font-weight:600}
.sidebar__user-role{font-size:.72rem;opacity:.55}

.sidebar__nav{flex:1;padding:16px 0;overflow-y:auto}
.sidebar__nav a{
  display:flex;align-items:center;gap:12px;padding:11px 24px;
  color:rgba(255,255,255,.72);font-size:.88rem;font-weight:500;
  transition:all var(--trans);border-left:3px solid transparent;
}
.sidebar__nav a:hover,.sidebar__nav a.active{
  background:rgba(52,152,219,.2);color:#fff;border-left-color:var(--blue);
}
.sidebar__nav a .nav-icon{font-size:1.1rem;width:22px;text-align:center}
.sidebar__separator{height:1px;background:rgba(255,255,255,.07);margin:8px 16px}

.sidebar__footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar__footer a{
  display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:.82rem;
  transition:color var(--trans);
}
.sidebar__footer a:hover{color:var(--red)}

/* ---- MAIN CONTENT ---- */
.main-content{margin-left:260px;flex:1;display:flex;flex-direction:column}
.topbar{
  background:var(--surface);border-bottom:1px solid var(--gray-l);
  padding:16px 32px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;
}
.topbar__title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;color:var(--dark)}
.topbar__actions{display:flex;align-items:center;gap:12px}
.page-body{padding:28px 32px;flex:1}

/* ============================================================
   CARDS & GRID
   ============================================================ */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.card-header h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;color:var(--dark)}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-bottom:28px}
.stat-card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px;position:relative;overflow:hidden;
  border-top:4px solid var(--blue);transition:var(--trans);
}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.stat-card--green{border-top-color:var(--green)}
.stat-card--red  {border-top-color:var(--red)}
.stat-card--gold {border-top-color:var(--gold)}
.stat-card__icon{font-size:2rem;margin-bottom:10px}
.stat-card__value{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:2.2rem;color:var(--dark)}
.stat-card__label{font-size:.82rem;color:var(--gray);font-weight:500;margin-top:2px}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 20px;
  border-radius:8px;font-weight:600;font-size:.88rem;cursor:pointer;
  border:none;transition:all var(--trans);text-decoration:none;white-space:nowrap;
}
.btn-primary  {background:var(--blue);   color:#fff}
.btn-primary:hover  {background:var(--blue-d); color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(52,152,219,.4)}
.btn-success  {background:var(--green);  color:#fff}
.btn-success:hover  {background:var(--green-d);color:#fff;transform:translateY(-1px)}
.btn-danger   {background:var(--red);    color:#fff}
.btn-danger:hover   {background:#c0392b;color:#fff}
.btn-secondary{background:var(--gray-l); color:var(--dark)}
.btn-secondary:hover{background:#dde4e6}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn-outline{background:transparent;border:2px solid var(--blue);color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}

/* ============================================================
   TABLAS
   ============================================================ */
.table-wrap{overflow-x:auto;border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
thead{background:var(--dark);color:#fff}
thead th{padding:12px 16px;text-align:left;font-weight:600;white-space:nowrap}
tbody tr{border-bottom:1px solid var(--gray-l);transition:background var(--trans)}
tbody tr:hover{background:#f0f4f7}
tbody td{padding:11px 16px;vertical-align:middle}
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 10px;
  border-radius:20px;font-size:.75rem;font-weight:600;
}
.badge-admin   {background:#d5eaff;color:#1a6fbe}
.badge-docente {background:#d5f5e3;color:#1a7a40}
.badge-alumno  {background:#ffe8cc;color:#b56a00}
.badge-active  {background:#d5f5e3;color:#1a7a40}
.badge-inactive{background:#fde8e8;color:#c0392b}
.badge-green{background:#d5f5e3;color:#1a7a40}
.badge-red  {background:#fde8e8;color:#c0392b}

/* ============================================================
   FORMULARIOS
   ============================================================ */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.85rem;font-weight:600;color:var(--dark);margin-bottom:6px}
.form-control{
  width:100%;padding:10px 14px;border:1.5px solid #d0d7de;border-radius:8px;
  font-size:.9rem;color:var(--dark);background:var(--surface);
  transition:border-color var(--trans),box-shadow var(--trans);
}
.form-control:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(52,152,219,.15)}
.form-control.error{border-color:var(--red)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-actions{display:flex;gap:12px;margin-top:24px;align-items:center}
.form-hint{font-size:.78rem;color:var(--gray);margin-top:4px}

select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:100px}

/* ============================================================
   ALERTAS / FLASH
   ============================================================ */
.alert{
  padding:13px 18px;border-radius:8px;margin-bottom:20px;
  display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:500;
}
.alert-success{background:#d5f5e3;color:#1a7a40;border-left:4px solid var(--green)}
.alert-error   {background:#fde8e8;color:#c0392b;border-left:4px solid var(--red)}
.alert-info    {background:#d5eaff;color:#1a6fbe;border-left:4px solid var(--blue)}
.alert-warning {background:#fff3cd;color:#856404;border-left:4px solid var(--gold)}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a2535 0%,#2d4a6e 50%,#1a3a5c 100%);
  padding:20px;position:relative;overflow:hidden;
}
.login-page::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.login-hero{text-align:center;color:#fff;margin-bottom:40px}
.login-hero__icon{font-size:4rem;margin-bottom:12px;filter:drop-shadow(0 0 20px rgba(52,152,219,.6))}
.login-hero__title{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:2.2rem;margin-bottom:6px}
.login-hero__sub{opacity:.65;font-size:.95rem}

.login-cards{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.login-card{
  background:rgba(255,255,255,.07);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  padding:32px 28px;width:300px;cursor:pointer;
  transition:all .3s ease;position:relative;overflow:hidden;
}
.login-card::before{
  content:'';position:absolute;inset:0;border-radius:20px;opacity:0;
  background:linear-gradient(135deg,rgba(52,152,219,.3),rgba(46,204,113,.1));
  transition:opacity .3s ease;
}
.login-card:hover{transform:translateY(-8px);border-color:rgba(255,255,255,.3);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login-card:hover::before{opacity:1}
.login-card__icon{font-size:2.8rem;margin-bottom:14px;display:block}
.login-card__title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:6px}
.login-card__desc{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.5}
.login-card__badge{
  margin-top:14px;display:inline-block;padding:4px 12px;border-radius:20px;
  font-size:.75rem;font-weight:600;background:rgba(52,152,219,.3);color:#74c7f5;
}

/* Modal de login */
.login-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .2s ease;
}
.login-modal{
  background:var(--surface);border-radius:20px;padding:36px;width:100%;max-width:440px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);animation:slideUp .3s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.login-modal__header{text-align:center;margin-bottom:28px}
.login-modal__icon{font-size:2.5rem;margin-bottom:10px;display:block}
.login-modal__title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem;color:var(--dark)}
.login-modal__sub{font-size:.85rem;color:var(--gray);margin-top:4px}

/* Registro */
.register-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a2535 0%,#2d4a6e 50%,#1a3a5c 100%);
  padding:20px;
}
.register-box{
  background:var(--surface);border-radius:20px;padding:40px;width:100%;max-width:520px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.register-box__header{text-align:center;margin-bottom:28px}
.register-box__icon{font-size:2.5rem;display:block;margin-bottom:8px}
.register-box__title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.4rem}
.register-box__sub{font-size:.85rem;color:var(--gray);margin-top:4px}

/* ============================================================
   ACTIVIDAD — CONTEXTO
   ============================================================ */
.actividad-hero{
  background:linear-gradient(135deg,#1a2535,#2d4a6e);
  border-radius:16px;padding:36px;margin-bottom:28px;color:#fff;position:relative;overflow:hidden;
}
.actividad-hero::after{
  content:'🔍';position:absolute;right:32px;top:50%;transform:translateY(-50%);
  font-size:8rem;opacity:.06;
}
.actividad-hero__badge{
  display:inline-flex;align-items:center;gap:6px;background:rgba(52,152,219,.3);
  border:1px solid rgba(52,152,219,.5);color:#74c7f5;padding:6px 14px;
  border-radius:20px;font-size:.8rem;font-weight:700;margin-bottom:16px;
}
.actividad-hero__title{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.8rem;margin-bottom:12px}
.actividad-hero__context{opacity:.85;font-size:.95rem;line-height:1.7;white-space:pre-line}

.instrucciones{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:16px 20px;margin-top:20px;font-size:.85rem;
  opacity:.8;white-space:pre-line;line-height:1.8;
}

/* Tabla museo */
.table-museo{border-collapse:collapse;width:100%;font-size:.85rem}
.table-museo thead{background:var(--dark);color:#fff}
.table-museo thead th{padding:10px 14px;text-align:left}
.table-museo tbody tr:nth-child(even){background:#f8fafc}
.table-museo tbody tr:hover{background:#e8f4fd}
.table-museo td{padding:8px 14px;border-bottom:1px solid var(--gray-l)}
.table-museo td.highlight{background:rgba(52,152,219,.08);font-weight:600;color:var(--blue)}

.nota-pie{
  background:#fff9e6;border:1px solid #f1c40f;border-radius:8px;
  padding:12px 16px;margin-top:16px;font-size:.85rem;color:#7d6608;
}
.iniciar-btn{
  display:block;width:100%;padding:16px;font-size:1.1rem;font-weight:700;
  background:linear-gradient(135deg,var(--green),#27ae60);color:#fff;
  border:none;border-radius:12px;cursor:pointer;margin-top:24px;
  transition:all var(--trans);text-align:center;text-decoration:none;
  box-shadow:0 4px 20px rgba(46,204,113,.4);
}
.iniciar-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(46,204,113,.5);color:#fff}

/* ============================================================
   QUIZ DE PREGUNTAS
   ============================================================ */
.quiz-progress{
  background:var(--surface);border-radius:var(--radius);padding:20px 24px;
  margin-bottom:24px;box-shadow:var(--shadow);
}
.quiz-progress__bar-wrap{background:var(--gray-l);border-radius:20px;height:8px;margin-top:10px}
.quiz-progress__bar{background:var(--blue);height:8px;border-radius:20px;transition:width .5s ease}

.pregunta-card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:30px;margin-bottom:20px;transition:var(--trans);
}
.pregunta-card.answered { opacity: .75; }
.pregunta-card.answered .opcion-item { pointer-events: none; }
.pregunta-card.answered .btn-xp { pointer-events: none; opacity: .5; }
.pregunta-num{
  font-size:.75rem;font-weight:700;color:var(--blue);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:10px;
}
.pregunta-pts{
  display:inline-block;background:#e8f4fd;color:var(--blue);
  font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:20px;margin-left:8px;
}
.pregunta-enunciado{font-size:1.25rem;font-weight:600;color:var(--dark);margin-bottom:20px;line-height:1.6}

.pregunta-media {
  margin-top: 15px; margin-bottom: 25px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,.1); border: 1px solid var(--gray-l); text-align: center;
}
.pregunta-media img {
  max-width: 100%; height: auto; max-height: 400px; display: block; margin: 0 auto;
}

/* Efectos especiales para imágenes (ej. retrato de sospechoso) */
.pregunta-media img.img-circular {
  border-radius: 50%;
  width: 250px;
  height: 250px;
  object-fit: cover;
  border: 5px solid var(--surface);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.pregunta-media img.img-animated {
  animation: floatAndSway 4s ease-in-out infinite;
}

@keyframes floatAndSway {
  0% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
  100% { transform: translateY(0) rotate(-2deg); }
}

.opciones-list{display:flex;flex-direction:column;gap:10px}
.opcion-item{
  display:flex;align-items:center;gap:14px;padding:13px 18px;
  border:2px solid var(--gray-l);border-radius:10px;cursor:pointer;
  transition:all var(--trans);font-size:.9rem;
}
.opcion-item:hover{border-color:var(--blue);background:#f0f7fe;transform:translateX(4px)}
.opcion-item.selected{border-color:var(--blue);background:#e8f4fd}
.opcion-item.correcta{border-color:var(--green);background:#d5f5e3;color:var(--green-d)}
.opcion-item.incorrecta{border-color:var(--red);background:#fde8e8;color:var(--red)}
.opcion-letter{
  width:32px;height:32px;border-radius:8px;background:var(--gray-l);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;
}
.opcion-item.correcta .opcion-letter {background:var(--green);color:#fff}
.opcion-item.incorrecta .opcion-letter{background:var(--red);color:#fff}
.opcion-item.selected .opcion-letter  {background:var(--blue);color:#fff}

.feedback-box{
  margin-top:14px;padding:12px 16px;border-radius:8px;font-size:.88rem;font-weight:500;
  display:none;
}
.feedback-box.show{display:block}
.feedback-box.correct  {background:#d5f5e3;color:#1a7a40;border-left:3px solid var(--green)}
.feedback-box.incorrect{background:#fde8e8;color:#c0392b;border-left:3px solid var(--red)}

.xp-toast{
  position:fixed;top:24px;right:24px;background:var(--dark);color:#fff;
  padding:12px 20px;border-radius:10px;font-weight:600;font-size:.9rem;
  box-shadow:var(--shadow-h);z-index:999;opacity:0;transform:translateX(40px);
  transition:all .4s ease;pointer-events:none;
}
.xp-toast.show{opacity:1;transform:translateX(0)}
.xp-toast.green{background:var(--green)}
.xp-toast.red  {background:var(--red)}

.next-wrap {
  text-align: center; margin-top: 32px;
  transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.next-wrap.locked {
  opacity: 0.4; pointer-events: none; filter: grayscale(1);
}
.next-wrap.locked .btn {
  background: transparent; border: 2px solid var(--blue); color: var(--blue);
}
.next-wrap.active {
  opacity: 1; pointer-events: auto; filter: grayscale(0);
}
.next-wrap.active .btn {
  background: var(--blue);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(52,152,219,0.3);
}
.next-wrap.active .btn-success {
  background: var(--green);
}

/* ============================================================
   RESULTADO
   ============================================================ */
.resultado-hero{
  text-align:center;padding:40px;
  background:linear-gradient(135deg,#1a2535,#2d4a6e);
  border-radius:16px;color:#fff;margin-bottom:28px;
}
.resultado-hero__score{
  font-family:'Space Grotesk',sans-serif;font-size:5rem;font-weight:800;
  line-height:1;margin:16px 0;
}
.resultado-hero__score.excellent{color:var(--green)}
.resultado-hero__score.good    {color:var(--gold)}
.resultado-hero__score.poor    {color:var(--red)}
.resultado-hero__label{font-size:.9rem;opacity:.7}

.resultado-detalle td:nth-child(3){text-align:center}
.check-icon{color:var(--green);font-size:1.2rem}
.cross-icon{color:var(--red);font-size:1.2rem}

/* ============================================================
   FORM ACTIVIDAD (docente)
   ============================================================ */
.pregunta-builder{
  background:var(--bg);border:2px dashed var(--gray-l);
  border-radius:var(--radius);padding:24px;margin-top:24px;
}
.pregunta-builder h3{
  font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;
  margin-bottom:16px;color:var(--dark);
}
.pregunta-item{
  background:var(--surface);border-radius:10px;padding:16px 20px;
  margin-bottom:12px;box-shadow:0 2px 8px rgba(44,62,80,.07);
  border-left:4px solid var(--blue);
}
.pregunta-item__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pregunta-item__num{font-weight:700;color:var(--blue);font-size:.85rem}
.pregunta-item__pts{background:#e8f4fd;color:var(--blue);font-size:.75rem;
  font-weight:700;padding:2px 8px;border-radius:10px}
.pregunta-item__enunciado{font-size:.88rem;color:var(--dark);line-height:1.5}
.opciones-preview{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.opcion-preview{
  font-size:.8rem;padding:5px 10px;border-radius:6px;
  background:var(--gray-l);color:var(--dark);display:flex;gap:8px;align-items:center;
}
.opcion-preview.es-correcta{background:#d5f5e3;color:#1a7a40}
.opcion-preview .letra{font-weight:700;min-width:20px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .sidebar{transform:translateX(-260px)}
  .sidebar.open{transform:translateX(0)}
  .main-content{margin-left:0}
  .mobile-menu-btn{display:flex!important}
  .form-row{grid-template-columns:1fr}
}
.mobile-menu-btn{
  display:none;background:none;border:none;cursor:pointer;padding:8px;
  color:var(--dark);font-size:1.4rem;align-items:center;
}
@media(max-width:600px){
  .login-cards{flex-direction:column;align-items:center}
  .login-card{width:100%;max-width:340px}
  .login-modal{padding:24px}
  .page-body{padding:16px}
  .topbar{padding:12px 16px}
}

/* Animación del Detective Flotante (Sube y Baja) */
.emoji-animated {
  display: inline-block;
  animation: detective-float 2.5s infinite ease-in-out;
}

@keyframes detective-float {
  0%, 100% { 
    transform: translateY(0); 
  }
  50% { 
    transform: translateY(-12px); 
    filter: drop-shadow(0 15px 15px rgba(52,152,219,.5));
  }
}

.login-hero__icon.emoji-animated {
  font-size: 5rem;
  margin-bottom: 20px;
}

/* Ojo para revelar contraseña */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-toggle {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--gray);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.password-toggle:hover {
  opacity: 0.7;
}

/* ============================================================
   MODAL DE DATOS Y GAMIFICACIÓN (PISTAS)
   ============================================================ */
.data-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  z-index: 900; display: none; align-items: center; justify-content: center; padding: 20px;
}
.data-modal-overlay.show {
  display: flex; animation: fadeIn .2s ease;
}
.data-modal {
  background: var(--surface); border-radius: 16px; width: 100%; max-width: 900px;
  max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: slideUp .3s ease;
}
.data-modal__header {
  padding: 20px 24px; border-bottom: 1px solid var(--gray-l);
  display: flex; align-items: center; justify-content: space-between;
}
.data-modal__title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.2rem; }
.data-modal__close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--gray); }
.data-modal__body { padding: 24px; overflow-y: auto; flex: 1; }

.btn-xp {
  background: var(--gold); color: #7d6608; border: none; padding: 6px 12px;
  border-radius: 20px; font-size: .8rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 10px rgba(241,196,15,.3);
  transition: all var(--trans); margin-left: auto;
}
.btn-xp:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(241,196,15,.4); }
.btn-xp:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(1); }

.hint-box {
  background: #fff9e6; border: 1px dashed var(--gold); border-radius: 8px;
  padding: 12px 16px; margin-top: 14px; font-size: .85rem; color: #7d6608;
  display: none;
}
.hint-box.show { display: block; animation: fadeIn .3s ease; }

.floating-btn {
  position: fixed; bottom: 30px; right: 30px; z-index: 100;
  background: var(--dark); color: #fff; padding: 14px 24px; border-radius: 30px;
  font-weight: 700; font-size: .95rem; cursor: pointer; border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); display: flex; align-items: center; gap: 8px;
  transition: all var(--trans);
}
.floating-btn:hover { background: #1a252f; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0,0,0,.4); }

.pregunta-card { display: none; }
.pregunta-card.active { display: block; }
/* ============================================================
   MAPA DE NIVELES (STEPPER)
   ============================================================ */
.level-map-wrapper {
  margin-top: 40px; border-top: 1px solid var(--gray-l); padding-top: 30px; padding-bottom: 50px;
}
.level-map-title {
  text-align: center; font-size: .85rem; font-weight: 700; color: var(--gray);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;
}
.level-dots {
  display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap;
}
.level-dot {
  width: 42px; height: 42px; border-radius: 50%; background: #fff;
  border: 2px solid var(--gray-l); display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: .95rem;
  color: var(--gray); position: relative; transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Línea conectora entre dots */
.level-dot::after {
  content: ''; position: absolute; left: 100%; top: 50%; width: 15px; height: 2px;
  background: var(--gray-l); z-index: -1;
}
.level-dot:last-child::after { display: none; }

.level-dot.locked { background: #f8f9fa; cursor: not-allowed; font-size: 1rem; }
.level-dot.locked i { font-size: .7rem; }

.level-dot.current {
  background: var(--blue); border-color: var(--blue); color: #fff;
  transform: scale(1.15); box-shadow: 0 0 20px rgba(52, 152, 219, 0.4);
  animation: pulse-blue 2s infinite;
}
.level-dot.completed {
  background: #27ae60; border-color: #27ae60; color: #fff; transform: scale(0.95);
}
.level-dot.completed::after { background: #27ae60; }

@keyframes pulse-blue {
  0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(52, 152, 219, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}

@media (max-width: 600px) {
  .level-dots { gap: 10px; }
  .level-dot { width: 34px; height: 34px; font-size: .8rem; }
  .level-dot::after { width: 10px; }
}