/* ═══════════════════════════════════════════════════════════════
   LEARN AUTH — UI styles
   Widget de usuario (avatar + menú), botón login, pantalla pending
   ═══════════════════════════════════════════════════════════════ */

/* User widget in header */
.la-user{position:relative;display:inline-block}
.la-avatar{position:relative;width:40px;height:40px;border-radius:50%;border:2px solid rgba(152,202,63,.35);background:var(--bg-s,#1a1a1a);padding:0;cursor:pointer;overflow:visible;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--text,#fff);transition:transform .15s ease,border-color .15s ease}
.la-avatar:hover{transform:scale(1.05);border-color:var(--primary,#98ca3f)}
.la-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.la-avatar .la-initial{font-size:1.05rem}
/* Badge de notificaciones (pendientes para staff) */
.la-avatar-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:.65rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--bg,#0b0d13);line-height:1;letter-spacing:.02em;box-shadow:none;animation:laBadgePulse 2s ease-in-out infinite}
.la-avatar-badge[hidden]{display:none}
@keyframes laBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){.la-avatar-badge{animation:none}}

.la-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:260px;max-height:calc(100vh - 80px);overflow-y:auto;background:var(--bg-card,#1a1a1a);border:1px solid var(--border,rgba(255,255,255,.1));border-radius:14px;padding:8px;box-shadow:none;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .15s ease,transform .15s ease;z-index:9999;visibility:hidden}
.la-menu.open{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}
.la-menu-head{padding:12px 14px 12px;margin-bottom:6px;border-bottom:1px solid var(--border,rgba(255,255,255,.08));display:flex;flex-direction:column;gap:2px}
.la-menu-head strong{font-size:.92rem;color:var(--text,#fff)}
.la-menu-head span{font-size:.75rem;color:var(--text-d,#9699a6)}
.la-menu-head .la-rol{margin-top:6px;display:inline-flex;align-items:center;gap:5px;background:rgba(152,202,63,.15);color:var(--primary,#98ca3f);padding:3px 9px;border-radius:12px;font-size:.7rem;font-weight:800;width:fit-content;letter-spacing:.02em}
.la-menu-head .la-rol-ico{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.la-menu-head .la-rol-ico svg{display:block}
.la-menu a,.la-menu button{display:block;width:100%;text-align:left;padding:10px 14px;border:none;background:transparent;color:var(--text,#fff);font-size:.85rem;font-weight:600;cursor:pointer;border-radius:8px;text-decoration:none;transition:background .12s ease}
.la-menu a:hover,.la-menu button:hover{background:rgba(255,255,255,.06)}
/* En el menú todos los items deben verse iguales (color base de texto).
   Sin esto, el override global de tema Udemy hace los <a> morados
   mientras los <button> quedan negros, generando ruido visual. */
.la-menu a,.la-menu a:link,.la-menu a:visited,.la-menu a:hover,.la-menu a:active{color:var(--text,#fff)}
html[data-theme="udemy"] .la-menu a,
html[data-theme="udemy"] .la-menu a:link,
html[data-theme="udemy"] .la-menu a:visited,
html[data-theme="udemy"] .la-menu a:hover,
html[data-theme="udemy"] .la-menu a:active{color:var(--text)}

/* Items del menú con icono SVG alineado. Sustituye el patrón antiguo
   de emoji + texto plano. */
.la-menu .la-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px}
.la-menu .la-item .la-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--text-d,#9699a6);flex-shrink:0;transition:color .12s ease}
.la-menu .la-item:hover .la-ico{color:var(--primary,#98ca3f)}
.la-menu .la-item-danger{color:#ef4444}
.la-menu .la-item-danger:hover{background:rgba(239,68,68,.08)}
.la-menu .la-item-danger .la-ico{color:#ef4444}
.la-menu .la-item-danger:hover .la-ico{color:#ef4444}

/* Botón "Ver como estudiante" — variante magenta sobria estilo Canvas */
.la-menu .la-item-vas-on{color:#d946ef;font-weight:700}
.la-menu .la-item-vas-on .la-ico{color:#d946ef}
.la-menu .la-item-vas-on:hover{background:rgba(217,70,239,.10)}

/* Banner inferior cuando el docente está en vista de estudiante */
.la-vas-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:9998;
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;
  background:linear-gradient(90deg,#a21caf,#c026d3);
  color:#fff;
  font-size:.9rem;line-height:1.3;
  border-top:1px solid rgba(255,255,255,.12);
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
}
.la-vas-banner .la-vas-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.95}
.la-vas-banner .la-vas-msg{flex:1;min-width:0}
.la-vas-banner .la-vas-msg strong{font-weight:800}
.la-vas-banner .la-vas-btn{
  appearance:none;border:1.5px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.12);color:#fff;
  font-weight:800;font-size:.85rem;
  padding:8px 14px;border-radius:8px;cursor:pointer;
  transition:background .12s ease, transform .12s ease;
  flex-shrink:0;
}
.la-vas-banner .la-vas-btn:hover{background:rgba(255,255,255,.22)}
.la-vas-banner .la-vas-btn:active{transform:translateY(1px)}
body.has-vas-banner{padding-bottom:64px}
@media (max-width:600px){
  .la-vas-banner{flex-wrap:wrap;gap:10px;font-size:.82rem;padding:10px 14px}
  .la-vas-banner .la-vas-msg{flex-basis:100%}
  body.has-vas-banner{padding-bottom:96px}
}

/* Separadores y rótulos de sección. */
.la-menu .la-sep{height:1px;background:var(--border,rgba(255,255,255,.08));margin:6px 4px}
.la-menu .la-section-label{font-size:.66rem;font-weight:800;letter-spacing:.06em;color:var(--text-d,#9699a6);text-transform:uppercase;padding:6px 14px 4px}

/* Mini-card de XP (alumno, dentro de un módulo) */
.la-xp-card{margin:8px 8px 4px;padding:12px 14px;background:linear-gradient(135deg,color-mix(in srgb, var(--primary,#98ca3f) 14%, transparent),color-mix(in srgb, var(--primary,#98ca3f) 4%, transparent));border:1px solid color-mix(in srgb, var(--primary,#98ca3f) 22%, var(--border));border-radius:10px}
.la-xp-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.la-xp-lvl{font-size:.78rem;font-weight:900;color:var(--primary,#98ca3f);letter-spacing:.02em}
.la-xp-num{font-size:.72rem;font-weight:700;color:var(--text-d,#9699a6);font-variant-numeric:tabular-nums}
.la-xp-bar{height:6px;background:color-mix(in srgb, var(--text,#fff) 8%, transparent);border-radius:3px;overflow:hidden}
.la-xp-fill{height:100%;background:linear-gradient(90deg,var(--primary,#98ca3f),color-mix(in srgb, var(--primary,#98ca3f) 60%, var(--accent-2,#38bdf8)));transition:width .35s cubic-bezier(.4,0,.2,1);border-radius:3px}
.la-xp-meta{font-size:.68rem;color:var(--text-d,#9699a6);margin-top:6px;font-weight:600}

/* Item con badge de conteo (Pendientes) */
.la-menu .la-item .la-item-lbl{flex:1}
.la-menu .la-item .la-item-count{background:#ef4444;color:#fff;font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:10px;line-height:1.4;font-variant-numeric:tabular-nums}
.la-menu .la-item-pending .la-ico{color:#ef4444}
.la-menu .la-item-pending:hover{background:rgba(239,68,68,.06)}

/* Switch de tema (segmented). Dos botones lado a lado dentro del menú. */
.la-theme-switch{display:flex;gap:4px;margin:0 8px 4px;padding:3px;background:rgba(255,255,255,.04);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:10px}
.la-theme-switch .la-theme-opt{flex:1;display:flex!important;align-items:center;justify-content:center;gap:6px;padding:7px 10px!important;border-radius:7px;font-size:.78rem!important;font-weight:700!important;color:var(--text-d,#9699a6)!important;background:transparent!important;width:auto!important;text-align:center!important;transition:background .15s ease,color .15s ease}
.la-theme-switch .la-theme-opt:hover{background:rgba(255,255,255,.04)!important;color:var(--text,#fff)!important}
.la-theme-switch .la-theme-opt.active{background:var(--primary,#98ca3f)!important;color:#0b0d13!important;box-shadow:0 2px 6px color-mix(in srgb, var(--primary, #98ca3f) 30%, transparent)}
.la-theme-switch .la-theme-ico{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.la-theme-switch .la-theme-ico svg{display:block}

/* Configuración "¿Cómo prefieres que te llamen?" (solo staff). */
.la-titulo-wrap{padding:10px 14px;margin:4px 0 6px;background:rgba(152,202,63,.06);border:1px solid rgba(152,202,63,.18);border-radius:10px}
.la-titulo-label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.03em;color:var(--primary,#98ca3f);margin-bottom:6px;text-transform:uppercase}
.la-titulo-row{display:flex;gap:6px;align-items:center}
.la-titulo-row input{flex:1;padding:7px 10px;background:var(--bg,#0b0d13);border:1px solid var(--border,rgba(255,255,255,.1));border-radius:8px;color:var(--text,#fff);font-size:.86rem;font-weight:600;outline:none}
.la-titulo-row input:focus{border-color:var(--primary,#98ca3f)}
.la-titulo-row button{flex-shrink:0;width:auto!important;display:inline-flex!important;align-items:center;justify-content:center;padding:7px 12px!important;background:var(--primary,#98ca3f)!important;color:#0b0d13!important;font-size:.78rem!important;font-weight:800!important;border-radius:8px!important}
.la-titulo-row button:hover{background:var(--primary,#98ca3f)!important;opacity:.9}
.la-titulo-row button:disabled{opacity:.6;cursor:not-allowed}
.la-titulo-hint{font-size:.7rem;color:var(--text-d,#9699a6);margin-top:6px;line-height:1.4}
.la-menu button#laLogout{color:#ef4444}

/* Login button (inline in header when not logged in) */
.la-login{background:linear-gradient(135deg,var(--primary,#98ca3f),var(--accent-2,#38bdf8));color:#000;border:none;padding:10px 20px;border-radius:24px;font-weight:800;font-size:.88rem;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:none;transition:transform .15s ease,box-shadow .15s ease}
.la-login:hover{transform:translateY(-1px);box-shadow:none}
.la-login::before{content:"G";display:inline-flex;width:22px;height:22px;border-radius:50%;background:#fff;color:#4285f4;align-items:center;justify-content:center;font-weight:900;font-size:.85rem}

/* Big centered login card (used on landing and pending screens) */
.la-gate{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.la-card{max-width:440px;width:100%;background:var(--bg-card,#1a1a1a);border:1px solid var(--border,rgba(255,255,255,.1));border-radius:20px;padding:44px 36px;text-align:center;box-shadow:none}
.la-card .la-ico{font-size:3rem;margin-bottom:16px;line-height:1}
.la-card h2{font-size:1.6rem;font-weight:900;margin-bottom:10px;color:var(--text,#fff)}
.la-card p{font-size:.92rem;color:var(--text-d,#9699a6);line-height:1.55;margin-bottom:24px}
.la-card .la-login{margin:0 auto}

/* Pending screen variant */
.la-card.pending{border-color:rgba(245,158,11,.35);background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(108,99,255,.04))}
.la-card.pending .la-ico{color:#f59e0b}
.la-card .la-meta{margin-top:20px;padding-top:20px;border-top:1px solid var(--border,rgba(255,255,255,.08));display:flex;flex-direction:column;gap:8px;font-size:.8rem;color:var(--text-d,#9699a6)}
.la-card .la-meta strong{color:var(--text,#fff)}
.la-card button.la-ghost{background:transparent;color:var(--text-d,#9699a6);border:1px solid var(--border,rgba(255,255,255,.1));padding:8px 16px;border-radius:20px;font-size:.78rem;font-weight:700;cursor:pointer;margin-top:14px}
.la-card button.la-ghost:hover{color:var(--text,#fff);border-color:var(--primary,#98ca3f)}

/* ═══════════════════════════════════════════════════════════════
   THEME: UDEMY overrides para user widget
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="udemy"] .la-avatar{background:#f7f9fa;border-color:rgba(164,53,240,.4);color:var(--text)}
html[data-theme="udemy"] .la-avatar:hover{border-color:var(--primary)}
html[data-theme="udemy"] .la-menu{background:#ffffff;border-color:var(--border);border-radius:4px;box-shadow:none}
html[data-theme="udemy"] .la-menu a:hover,html[data-theme="udemy"] .la-menu button:hover{background:#f7f9fa;border-radius:0}
html[data-theme="udemy"] .la-menu-head .la-rol{background:rgba(164,53,240,.10);color:var(--primary);border-radius:4px}
html[data-theme="udemy"] .la-titulo-wrap{background:rgba(164,53,240,.06);border-color:rgba(164,53,240,.22)}
html[data-theme="udemy"] .la-titulo-label{color:var(--primary)}
html[data-theme="udemy"] .la-titulo-row input{background:#ffffff;color:var(--text)}
html[data-theme="udemy"] .la-titulo-row input:focus{border-color:var(--primary)}
html[data-theme="udemy"] .la-titulo-row button{background:var(--primary)!important;color:#ffffff!important}
html[data-theme="udemy"] .la-menu button#laLogout{color:var(--danger)}
html[data-theme="udemy"] .la-theme-switch .la-theme-opt.active{color:#fff!important}
html[data-theme="udemy"] .la-login{background:var(--primary);color:#ffffff;box-shadow:none;border-radius:4px;border:1px solid var(--primary)}
html[data-theme="udemy"] .la-login:hover{background:var(--primary-d);border-color:var(--primary-d);transform:none;box-shadow:none}
html[data-theme="udemy"] .la-login::before{background:#ffffff;color:#4285f4}
html[data-theme="udemy"] .la-card{background:#ffffff;box-shadow:none;border-radius:4px}
html[data-theme="udemy"] .la-card.pending{background:#ffffff;border-color:rgba(185,132,7,.35)}

/* ═══════════════════════════════════════════════════════════════
   MOBILE: el dropdown del avatar mide 240px+padding y se desbordaba
   en pantallas chicas (<320px reales con scroll). En mobile lo
   anclamos a ambos bordes con un margen de 12px y removemos el
   min-width para que respete el viewport real.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:600px){
  /* En móvil el menú se ancla al viewport (position:fixed) para que
     right/left tomen como referencia el viewport y no su contenedor
     diminuto (.la-user de 36px). Se posiciona debajo del avatar. */
  .la-menu{
    position:fixed;
    top:calc(max(8px,env(safe-area-inset-top)) + 44px);
    right:8px;
    left:8px;
    bottom:auto;
    width:auto;
    min-width:unset;
    max-width:none;
    max-height:calc(100vh - 80px);
    overflow-y:auto;
    box-sizing:border-box;
  }
  /* Cuando hay teacher-bar fija el menú baja para no chocar con ella */
  body.is-staff:not(.pm-active) .la-menu{
    top:calc(max(8px,env(safe-area-inset-top)) + 96px);
    max-height:calc(100vh - 130px);
  }
  .la-titulo-row{flex-wrap:wrap;gap:6px}
  .la-titulo-row input{min-width:0;flex:1 1 100%}
  .la-titulo-row button{flex:1 1 auto}
}