/* ═══════════════════════════════════════════════════════════════
   LEARN FEEDBACK — estilos (modal envío + FAB)
   ═══════════════════════════════════════════════════════════════ */

/* ─── FAB flotante ────────────────────────────────────────── */
.lfb-fab{
  position:fixed; left:16px; bottom:16px;
  z-index:9498;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px 10px 12px;
  border-radius:100px;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text);
  font-size:.82rem; font-weight:600;
  cursor:pointer;
  box-shadow:none;
  transition:transform .15s,background .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.lfb-fab:hover{ transform:translateY(-2px); border-color:var(--primary); background:var(--bg-hover) }
.lfb-fab-ico{ font-size:1.15rem; line-height:1 }
.lfb-fab-lbl{ line-height:1 }
/* Ocultar en modo presentación / pizarra activa / clase-live abierta */
body.pm-active .lfb-fab,
body.wb-active .lfb-fab,
body:has(.nb-panel.open) .lfb-fab{ display:none !important }
/* Si el usuario está logueado, la acción "Enviar feedback" vive en el
   menú del avatar (#userWidget .la-user). Ocultamos el FAB en cualquier
   tamaño de pantalla para no duplicar la acción. */
body:has(#userWidget .la-user) .lfb-fab{ display:none !important }

@media (max-width:640px){
  /* En móvil compactamos el FAB cuando aparece (usuarios sin login). */
  .lfb-fab{ padding:10px 14px 10px 12px; bottom:12px; left:12px; opacity:.55; transition:opacity .2s ease; min-height:44px; min-width:44px }
  .lfb-fab-lbl{ display:none }
  .lfb-fab:hover, .lfb-fab:focus-visible, .lfb-fab:active{ opacity:1 }
  /* Reservar espacio inferior solo si el FAB sigue visible (sin login) */
  body:not(:has(#userWidget .la-user)) main, body:not(:has(#userWidget .la-user)) > main, body:not(:has(#userWidget .la-user)) .container, body:not(:has(#userWidget .la-user)) .container-narrow{
    padding-bottom:max(80px, calc(72px + env(safe-area-inset-bottom,0px)));
  }
}

/* ─── Modal shell ─────────────────────────────────────────── */
.lfb-modal{
  position:fixed; inset:0;
  z-index:20000;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
  animation:lfbFadeIn .18s ease;
}
@keyframes lfbFadeIn { from { opacity:0 } to { opacity:1 } }
.lfb-box{
  width:100%; max-width:560px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px 16px 0 0;
  display:flex; flex-direction:column;
  max-height:92vh;
  box-shadow:none;
  animation:lfbSlideUp .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes lfbSlideUp { from { transform:translateY(32px); opacity:.6 } to { transform:translateY(0); opacity:1 } }
@media (min-width:641px){
  .lfb-modal{ align-items:center; padding:20px }
  .lfb-box{ border-radius:16px }
}
.lfb-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--border);
}
.lfb-head h3{ font-size:1.05rem; margin:0; color:var(--text); font-weight:700 }
.lfb-close{
  background:transparent; border:0; color:var(--text-d);
  font-size:1.6rem; line-height:1; cursor:pointer; padding:2px 8px; border-radius:6px;
}
.lfb-close:hover{ color:var(--text); background:var(--bg-hover) }
.lfb-body{ padding:18px; overflow-y:auto; flex:1 }
.lfb-foot{
  padding:12px 18px;
  border-top:1px solid var(--border);
  display:flex; gap:8px; justify-content:flex-end;
  background:var(--bg-2);
  border-radius:0 0 16px 16px;
}
@media (max-width:640px){
  .lfb-foot{ border-radius:0 }
}

.lfb-lede{ font-size:.86rem; color:var(--text-d); margin:0 0 14px }
.lfb-label{
  display:block; font-size:.78rem; font-weight:600;
  color:var(--text-d); margin:14px 0 6px;
  text-transform:uppercase; letter-spacing:.04em;
}
.lfb-textarea{
  width:100%; min-height:120px; resize:vertical;
  background:var(--bg); color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  font-family:inherit; font-size:.9rem; line-height:1.5;
  outline:none; transition:border-color .15s,box-shadow .15s;
}
.lfb-textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow) }

/* ─── Type selector ───────────────────────────────────────── */
.lfb-type-row{ display:flex; gap:10px; margin-bottom:6px }
.lfb-type-btn{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 10px;
  border-radius:12px;
  border:1.5px solid var(--border);
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
}
.lfb-type-btn:hover{ border-color:var(--border-light); background:var(--bg-hover) }
.lfb-type-btn.active{ border-color:var(--primary); background:var(--primary-glow) }
.lfb-type-ico{ font-size:1.4rem; line-height:1 }
.lfb-type-btn strong{ font-size:.88rem; color:var(--text) }
.lfb-type-hint{ font-size:.7rem; color:var(--text-d) }

/* ─── Paste zone ──────────────────────────────────────────── */
.lfb-paste-zone{
  margin-top:14px;
  border:1.5px dashed var(--border-light);
  border-radius:12px;
  padding:18px 14px;
  text-align:center;
  transition:border-color .15s,background .15s;
  cursor:default;
}
.lfb-paste-zone:focus{ outline:none; border-color:var(--primary) }
.lfb-paste-zone.drag{ border-color:var(--primary); background:var(--primary-glow) }
.lfb-paste-zone.ok{ border-color:var(--success); border-style:solid }
.lfb-paste-title{ font-size:.86rem; color:var(--text); font-weight:600 }
.lfb-paste-shortcut{ font-size:.68rem; color:var(--text-d); margin-top:4px }
.lfb-upload-label{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px;
  padding:6px 14px;
  border-radius:8px;
  border:1px solid var(--border-light);
  background:var(--bg-elevated);
  color:var(--primary);
  font-size:.78rem; font-weight:600;
  cursor:pointer;
}
.lfb-upload-label:hover{ background:var(--bg-hover) }
@media (max-width:640px){
  .lfb-paste-shortcut{ display:none }
}

/* Image preview */
.lfb-img-preview{
  display:flex; align-items:center; gap:12px; text-align:left;
}
.lfb-img-preview img{
  width:72px; height:72px; object-fit:cover;
  border-radius:8px; border:1px solid var(--border-light);
  flex:0 0 auto;
}
.lfb-img-meta{ flex:1; min-width:0 }
.lfb-img-title{ font-size:.85rem; font-weight:600; color:var(--text) }
.lfb-img-status{ font-size:.72rem; color:var(--text-d); margin-top:4px }
.lfb-img-x{
  flex:0 0 auto;
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border-light); background:var(--bg-elevated);
  color:var(--text-d); font-size:1.1rem; line-height:1; cursor:pointer;
}
.lfb-img-x:hover{ color:var(--danger); border-color:var(--danger) }

/* Spinner */
.lfb-spinner{
  width:12px; height:12px; display:inline-block; vertical-align:middle;
  border:2px solid var(--border); border-top-color:var(--primary);
  border-radius:50%; animation:lfbSpin .7s linear infinite;
  margin-right:4px;
}
@keyframes lfbSpin { to { transform:rotate(360deg) } }
.lfb-ok{ color:var(--success) }
.lfb-err{ color:var(--danger) }
.lfb-muted{ color:var(--text-d) }

/* AI callout */
.lfb-ai-callout{
  margin-top:12px;
  background:var(--bg-2);
  border:1px solid var(--border-light);
  border-radius:10px;
  padding:12px 14px;
}
.lfb-ai-head{
  font-size:.75rem; font-weight:700; color:var(--primary);
  margin-bottom:6px;
}
.lfb-ai-sub{ font-weight:400; color:var(--text-d); margin-left:4px }
.lfb-ai-text{
  font-size:.82rem; color:var(--text); line-height:1.55;
  white-space:pre-wrap; max-height:180px; overflow-y:auto;
}

/* Priority pills */
.lfb-pri-row{ display:flex; gap:8px; flex-wrap:wrap }
.lfb-pri-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px; border-radius:22px;
  font-size:.8rem; font-weight:600; cursor:pointer;
  border:1.5px solid var(--border); background:var(--bg);
  color:var(--text);
  font-family:inherit;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.lfb-pri-pill.pri-baja{ color:#22c55e; border-color:rgba(34,197,94,.35) }
.lfb-pri-pill.pri-baja.active{ background:rgba(34,197,94,.12); border-color:#22c55e }
.lfb-pri-pill.pri-media{ color:#f59e0b; border-color:rgba(245,158,11,.35) }
.lfb-pri-pill.pri-media.active{ background:rgba(245,158,11,.12); border-color:#f59e0b }
.lfb-pri-pill.pri-alta{ color:#ef4444; border-color:rgba(239,68,68,.35) }
.lfb-pri-pill.pri-alta.active{ background:rgba(239,68,68,.12); border-color:#ef4444 }

/* Buttons (footer) */
.lfb-btn{
  padding:9px 18px; border-radius:10px;
  font-size:.86rem; font-weight:600;
  cursor:pointer; font-family:inherit;
  border:1px solid transparent;
  transition:all .15s;
}
.lfb-btn:disabled{ opacity:.6; cursor:not-allowed }
.lfb-btn-ghost{
  background:transparent; color:var(--text-d); border-color:var(--border);
}
.lfb-btn-ghost:hover{ color:var(--text); background:var(--bg-hover) }
.lfb-btn-primary{
  background:var(--primary); color:var(--on-primary); border-color:var(--primary);
}
.lfb-btn-primary:hover{ background:var(--primary-d); border-color:var(--primary-d) }

/* ─── THEME: UDEMY ─────────────────────────────────────────── */
html[data-theme="udemy"] .lfb-fab{background:var(--primary);color:#fff;box-shadow:none}
html[data-theme="udemy"] .lfb-fab:hover{background:var(--primary-d)}
html[data-theme="udemy"] .lfb-box{background:#ffffff;box-shadow:none}
html[data-theme="udemy"] .lfb-modal{background:rgba(40,44,63,.45)}
html[data-theme="udemy"] .lfb-paste-zone{background:#f7f9fa}
html[data-theme="udemy"] .lfb-ai-callout{background:rgba(164,53,240,.06);border-color:rgba(164,53,240,.22)}