/* ============================================================
   LSM Aprende v2 — main.css  (versión corregida responsive)
============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --navy:      #0F1729;
  --navy-mid:  #1a2540;
  --amber:     #F5A623;
  --amber-deep:#D4891A;
  --teal:      #17A96B;
  --teal-deep: #0D7A4D;
  --coral:     #E85D3E;
  --purple:    #6C63FF;
  --white:     #FFFFFF;
  --off-white: #F8F9FC;
  --gray-100:  #F1F4F9;
  --gray-200:  #E2E8F4;
  --gray-500:  #8492A6;
  --gray-700:  #4A5568;
  --text-main: #1a2035;
  --text-muted:#6B7B9A;
  --shadow-sm: 0 2px 12px rgba(15,23,41,.06);
  --shadow-md: 0 6px 30px rgba(15,23,41,.10);
  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  /* Fuentes con fallback completo */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  --font-body:    'Nunito', 'Segoe UI', Arial, sans-serif;
  --transition:   all .2s ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--text-main);
  background: var(--off-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; }
img { max-width: 100%; height: auto; }

/* ── Navbar ────────────────────────────────────────────────── */
.lsm-nav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  border-top: 3px solid var(--teal);
  padding: .65rem 0;
  position: sticky; top: 0; z-index: 1030;
}
.brand-icon {
  width: 36px; height: 36px; min-width: 36px;
  background: var(--amber); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--white);
}
.brand-logo-img {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 50%; object-fit: cover;
  background: var(--teal);
  border: 2px solid var(--amber);
  box-shadow: 0 2px 8px rgba(23,169,107,.35);
}
.brand-text {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 800; color: var(--navy);
  white-space: nowrap;
}
.brand-accent { color: var(--amber); }
.lsm-nav .nav-link {
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  color: var(--gray-700); border-radius: 7px;
  padding: .38rem .65rem; transition: var(--transition);
  white-space: nowrap;
}
.lsm-nav .nav-link:hover, .lsm-nav .nav-link.active {
  color: var(--teal-deep); background: rgba(23,169,107,.1);
}
.btn-outline-nav {
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  border: 1.5px solid var(--gray-200); color: var(--navy);
  border-radius: 9px; padding: .38rem .9rem;
  white-space: nowrap; transition: var(--transition);
}
.btn-outline-nav:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.btn-cta {
  font-family: var(--font-display); font-size: .82rem; font-weight: 700;
  background: var(--amber); color: var(--navy); border: none;
  border-radius: 9px; padding: .38rem 1rem;
  white-space: nowrap; transition: var(--transition);
}
.btn-cta:hover { background: var(--amber-deep); color: var(--navy); }
.btn-camara-nav {
  font-family: var(--font-display); font-size: .82rem; font-weight: 700;
  background: rgba(23,169,107,.12); color: var(--teal-deep); border: none;
  border-radius: 9px; padding: .38rem .9rem;
  white-space: nowrap; transition: var(--transition);
  text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
}
.btn-camara-nav:hover { background: var(--teal); color: #fff; }
.avatar-sm {
  width: 28px; height: 28px; background: var(--teal); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.nav-user-btn {
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: 20px; padding: .28rem .7rem .28rem .35rem;
  transition: var(--transition); white-space: nowrap;
}
.nav-user-btn:hover { background: var(--gray-200); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  background: var(--navy); padding: 4rem 0 3.5rem;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(245,166,35,.07); pointer-events: none;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(245,166,35,.15); border: 1px solid rgba(245,166,35,.3);
  color: var(--amber); font-family: var(--font-display);
  font-size: .75rem; font-weight: 700; border-radius: 100px;
  padding: .3rem .9rem; margin-bottom: 1.25rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(1.7rem, 4.5vw, 3.2rem); color: #fff;
  line-height: 1.15; margin-bottom: 1rem;
}
.hero h1 span { color: var(--amber); }
.hero p.lead { color: rgba(255,255,255,.7); font-size: 1rem; margin-bottom: 1.75rem; }
.btn-hero-primary {
  background: var(--amber); color: var(--navy);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  border: none; border-radius: 11px; padding: .78rem 1.75rem;
  transition: var(--transition); display: inline-flex; align-items: center; gap: .5rem;
}
.btn-hero-primary:hover { background: var(--amber-deep); color: var(--navy); transform: translateY(-2px); }
.btn-hero-outline {
  background: transparent; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 11px;
  padding: .78rem 1.75rem; transition: var(--transition);
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-hero-outline:hover { background: rgba(255,255,255,.1); color: #fff; }
.hero-stats { display: flex; gap: 1.75rem; margin-top: 2.5rem; flex-wrap: wrap; }
.hero-stat strong {
  display: block; font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800; color: var(--amber); line-height: 1;
}
.hero-stat span { color: rgba(255,255,255,.55); font-size: .78rem; }

/* Chips de perfil */
.profile-chips { display: flex; gap: .65rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem; border-radius: 100px;
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: var(--transition);
}
.chip-sordo { background: rgba(14,165,233,.15); color: #38bdf8; border: 1.5px solid rgba(14,165,233,.3); }
.chip-sordo:hover { background: #0ea5e9; color: #fff; }
.chip-oyente { background: rgba(245,166,35,.15); color: var(--amber); border: 1.5px solid rgba(245,166,35,.3); }
.chip-oyente:hover { background: var(--amber); color: var(--navy); }

/* Chip activo (perfil actual del usuario) */
.chip-activo { position: relative; box-shadow: 0 0 0 2px rgba(255,255,255,.4); }
.chip-sordo.chip-activo { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
.chip-oyente.chip-activo { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.chip-badge-activo {
  font-size: .65rem; font-weight: 800; padding: .1rem .4rem;
  border-radius: 100px; background: rgba(255,255,255,.25);
  margin-left: .2rem; letter-spacing: .02em;
}

/* Chip bloqueado (perfil diferente al del usuario) */
.chip-bloqueado {
  opacity: .45; filter: grayscale(40%);
  border-style: dashed !important;
  position: relative;
  transition: opacity .2s, filter .2s;
}
.chip-bloqueado:hover { opacity: .7; filter: grayscale(0%); }

/* ── Cards ─────────────────────────────────────────────────── */
.card-lsm {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card-lsm:hover { box-shadow: var(--shadow-md); }
.card-modulo {
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: var(--transition); height: 100%;
}
.card-modulo:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card-modulo .modulo-header { padding: 1.25rem 1.25rem .85rem; }
.card-modulo .modulo-footer {
  padding: .85rem 1.25rem; border-top: 1px solid var(--gray-100);
  background: var(--off-white);
}

/* Badges de nivel y tipo */
.nivel-badge {
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 100px; display: inline-block;
}
.nivel-1 { background: rgba(23,169,107,.1); color: var(--teal-deep); }
.nivel-2 { background: rgba(108,99,255,.1); color: var(--purple); }
.nivel-3 { background: rgba(232,93,62,.1);  color: var(--coral); }
.tipo-sordo  { background: rgba(14,165,233,.12); color: #0284c7; }
.tipo-oyente { background: rgba(245,166,35,.12); color: var(--amber-deep); }
.tipo-ambos  { background: rgba(23,169,107,.12); color: var(--teal-deep); }

/* Selector visual sordo/oyente para contenido */
.perfil-selector { display: flex; gap: .75rem; flex-wrap: wrap; }
.perfil-btn {
  flex: 1; min-width: 120px;
  border: 2px solid var(--gray-200); border-radius: var(--radius);
  padding: 1rem; text-align: center; cursor: pointer;
  transition: var(--transition); background: #fff;
}
.perfil-btn:hover { border-color: var(--amber); }
.perfil-btn.sel-sordo  { border-color: #0ea5e9; background: rgba(14,165,233,.06); }
.perfil-btn.sel-oyente { border-color: var(--amber); background: rgba(245,166,35,.06); }
.perfil-btn.sel-ambos  { border-color: var(--teal); background: rgba(23,169,107,.06); }

/* ── Sección general ───────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 800; color: var(--navy);
}
.section-sub { color: var(--text-muted); font-size: 1rem; max-width: 520px; }
.feature-icon {
  width: 50px; height: 50px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  flex-shrink: 0;
}
.fi-amber  { background: rgba(245,166,35,.12); color: var(--amber-deep); }
.fi-teal   { background: rgba(23,169,107,.12); color: var(--teal-deep); }
.fi-blue   { background: rgba(14,165,233,.12); color: #0284c7; }
.fi-purple { background: rgba(108,99,255,.12); color: var(--purple); }
.fi-coral  { background: rgba(232,93,62,.12);  color: var(--coral); }
.fi-green  { background: rgba(23,169,107,.12); color: var(--teal-deep); }

/* ── Visor de lecciones ────────────────────────────────────── */
.lesson-layout { display: flex; min-height: 80vh; }
.lesson-sidebar {
  width: 270px; min-width: 270px; background: #fff;
  border-right: 1px solid var(--gray-200); overflow-y: auto;
  max-height: calc(100vh - 65px); position: sticky; top: 65px;
}
.lesson-main { flex: 1; padding: 1.75rem; min-width: 0; }
.lesson-sidebar .side-header {
  padding: 1.1rem; border-bottom: 1px solid var(--gray-100);
  background: var(--off-white);
}
.lesson-item {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .78rem 1.1rem; border-bottom: 1px solid var(--gray-100);
  text-decoration: none; color: inherit; transition: var(--transition);
}
.lesson-item:hover { background: var(--off-white); }
.lesson-item.active { background: rgba(245,166,35,.08); border-left: 3px solid var(--amber); }
.lesson-num {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: var(--gray-200); font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
}
.lesson-item.active .lesson-num { background: var(--amber); color: var(--navy); }
.lesson-item.done .lesson-num { background: var(--teal); color: #fff; }

/* ── Contenido de lección ──────────────────────────────────── */
.content-block { margin-bottom: 1.5rem; }
.content-block img { border-radius: var(--radius); width: 100%; max-height: 480px; object-fit: contain; box-shadow: var(--shadow-sm); }
.content-block video { border-radius: var(--radius); width: 100%; max-height: 480px; background: #000; }
.content-audio-card {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 1.1rem;
  display: flex; align-items: center; gap: 1rem;
}
.content-texto-card {
  background: var(--off-white); border-left: 4px solid var(--amber);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.4rem;
}

/* ── Badge tipo usuario en contenido ───────────────────────── */
.badge-sordo-content {
  background: rgba(14,165,233,.15); color: #0284c7;
  border: 1px solid rgba(14,165,233,.3);
  font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:100px;
}
.badge-oyente-content {
  background: rgba(245,166,35,.15); color: var(--amber-deep);
  border: 1px solid rgba(245,166,35,.3);
  font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:100px;
}
.badge-ambos-content {
  background: rgba(23,169,107,.15); color: var(--teal-deep);
  border: 1px solid rgba(23,169,107,.3);
  font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:100px;
}

/* ── Auth ──────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh; background: var(--navy);
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.auth-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 2.25rem; width: 100%; max-width: 430px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

/* ── Dashboard ─────────────────────────────────────────────── */
.dash-stat {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 1.25rem;
  display: flex; align-items: center; gap: .85rem;
}
.dash-stat-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.progress-lsm { height: 7px; border-radius: 100px; background: var(--gray-200); overflow: hidden; }
.progress-lsm .progress-bar { background: var(--teal); border-radius: 100px; transition: width .5s ease; }

/* ── Traductor / Cámara ────────────────────────────────────── */
.mic-btn {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--navy); border: 3px solid var(--amber);
  color: var(--amber); font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--transition);
}
.mic-btn.listening {
  background: var(--amber); color: var(--navy);
  animation: pulse-mic 1.4s infinite;
}
@keyframes pulse-mic {
  0%   { box-shadow: 0 0 0 0 rgba(245,166,35,.5); }
  70%  { box-shadow: 0 0 0 18px rgba(245,166,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}
.sena-result-card {
  background: var(--navy); border-radius: var(--radius-lg);
  padding: 1.75rem; text-align: center; color: #fff;
  min-height: 190px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .85rem;
}

/* ── Footer ────────────────────────────────────────────────── */
footer.lsm-footer {
  background: var(--navy); color: rgba(255,255,255,.55);
  padding: 2.5rem 0 1.25rem; font-size: .85rem;
  border-top: 3px solid var(--teal);
}
footer .footer-brand { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: #fff; }
footer a { color: rgba(255,255,255,.55); text-decoration: none; transition: var(--transition); }
footer a:hover { color: var(--amber); }

/* ── Utilidades ────────────────────────────────────────────── */
.text-amber { color: var(--amber) !important; }
.text-teal  { color: var(--teal) !important; }
.text-navy  { color: var(--navy) !important; }
.bg-navy    { background: var(--navy) !important; }
.btn-amber  { background: var(--amber); color: var(--navy); font-weight: 700; border: none; font-family: var(--font-display); border-radius: var(--radius-sm); }
.btn-amber:hover { background: var(--amber-deep); color: var(--navy); }
.btn-teal   { background: var(--teal); color: #fff; font-weight: 700; border: none; font-family: var(--font-display); border-radius: var(--radius-sm); }
.btn-teal:hover { background: var(--teal-deep); color: #fff; }
.btn-navy   { background: var(--navy); color: #fff; font-weight: 700; border: none; font-family: var(--font-display); border-radius: var(--radius-sm); }
.btn-navy:hover { background: var(--navy-mid); color: #fff; }
.lsm-section     { padding: 4rem 0; }
.lsm-section-alt { padding: 4rem 0; background: #fff; }
.divider-amber   { width: 44px; height: 4px; background: var(--amber); border-radius: 4px; margin: .65rem 0 1.35rem; }
.form-control, .form-select {
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-family: var(--font-body); padding: .6rem .9rem; transition: var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,.15);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 991px) {
  .lesson-layout { flex-direction: column; }
  .lesson-sidebar { width: 100%; min-width: unset; max-height: 280px; position: relative; top: 0; }
  .lesson-main { padding: 1.25rem; }
}
@media (max-width: 767px) {
  .hero { padding: 2.5rem 0 2rem; }
  .hero-stats { gap: 1.25rem; }
  .hero h1 { font-size: 1.7rem; }
  .lsm-section, .lsm-section-alt { padding: 2.5rem 0; }
  .auth-card { padding: 1.5rem; }
  .dash-stat { padding: 1rem; }
  .card-modulo .modulo-header { padding: 1rem; }

  /* Centrar el bloque de texto del hero en celular: en escritorio queda a
     la izquierda porque hay una columna al lado (el slider de imágenes),
     pero en celular esa columna se apila abajo y el texto se ve pegado a
     la izquierda en vez de centrado. Solo afecta este rango de pantalla;
     en escritorio se queda exactamente igual que antes. */
  .hero .col-lg-6 { text-align: center; }
  .hero-badge { margin-left: auto; margin-right: auto; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .profile-chips { justify-content: center; }
  .hero .d-flex.gap-3.flex-wrap { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-stat { text-align: center; }
}
@media (max-width: 480px) {
  .profile-chips { gap: .5rem; }
  .chip { font-size: .75rem; padding: .4rem .75rem; }
  .btn-hero-primary, .btn-hero-outline { font-size: .85rem; padding: .65rem 1.2rem; }
  /* Antes se apilaban en columna en celular; ahora se quedan en fila,
     reduciendo gap y tamaño de letra para que los 3 quepan sin amontonarse. */
  .hero-stats { flex-direction: row; flex-wrap: nowrap; gap: .6rem; justify-content: space-between; }
  .hero-stat { flex: 1 1 0; min-width: 0; }
  .hero-stat strong { font-size: 1.25rem; }
  .hero-stat span { font-size: .68rem; line-height: 1.15; display: block; }

  /* "Apoyar el proyecto" (banner de donación): en celular el contenedor
     flex se apila en columna por flex-wrap, dejando el botón pegado a la
     izquierda — lo centramos junto con el texto que lo acompaña. */
  .banner-donacion-row {
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }
  .banner-donacion-row > .d-flex.align-items-center.gap-3 {
    justify-content: center;
  }
}

/* ── Menú de usuario en móvil: vive en la topbar, fuera del navMenu,
   así nunca compite por espacio con la navegación principal ── */
@media (max-width: 991px) {
  .lsm-user-dropdown-mobile .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    transform: none !important;
    width: 260px;
    max-width: 90vw;
  }
}

/* ── Offcanvas navbar — colores y hover ────────────────────── */
.offcanvas-link {
  color: rgba(255,255,255,.85) !important;
  border-radius: 8px;
  transition: background .2s, color .2s !important;
  cursor: pointer !important;
}
.offcanvas-link:hover {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}
.offcanvas-link-danger {
  color: #f87171 !important;
  border-radius: 8px;
  padding: .5rem .75rem;
  display: block;
  transition: background .2s !important;
  cursor: pointer !important;
}
.offcanvas-link-danger:hover {
  background: rgba(248,113,113,.15) !important;
  color: #ffaaaa !important;
}