/* ============================================================
   LESSON BLOCKS — Lingua Soul  v5.0
   Tarjetas independientes + controles grandes + notas absolutas
   ============================================================ */

/* ── Secciones como tarjetas independientes ──────────────────
   Esto rompe la "columna vertical" y hace que cada bloque
   se vea como una card separada sobre el fondo de la página.
   ──────────────────────────────────────────────────────────── */
.lb-block {
  position: relative;
  border-radius: 14px;
  margin-bottom: 18px;
  /* Preserva el background de la sección interna */
  overflow: hidden;
  /* Sombra sutil que distingue cada card */
  box-shadow: 0 2px 16px rgba(0,0,0,0.22);
  transition: box-shadow 0.18s;
}

.lb-block:hover {
  box-shadow: 0 4px 28px rgba(0,0,0,0.32);
}

/* ── Grab indicator siempre visible (esquina sup. derecha) ──
   Una pequeña "oreja" que indica que el bloque es interactivo.
   Al hacer hover se expande a la barra completa.
   ──────────────────────────────────────────────────────────── */
.lb-grip {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: rgba(10, 15, 35, 0.7);
  border-radius: 0 14px 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  cursor: grab;
  transition: width 0.2s, height 0.2s, border-radius 0.2s, background 0.15s;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.lb-grip-icon {
  font-size: 18px;
  color: rgba(255,255,255,0.6);
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.15s;
  pointer-events: none;
}

.lb-block:hover .lb-grip {
  background: rgba(10, 15, 35, 0.92);
}

.lb-grip:active {
  cursor: grabbing;
}

.lb-block:hover .lb-grip-icon {
  color: #fff;
}

/* ── Controls bar — aparece al hover expandiendo el grip ──── */
.lb-bar {
  position: absolute;
  top: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(10, 15, 35, 0.94);
  border-radius: 0 14px 0 14px;
  padding: 0 10px 0 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  z-index: 16;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  box-shadow: -2px 2px 16px rgba(0,0,0,0.4);
  user-select: none;
}

/* Barra SOLO visible cuando el bloque está flotando — no en hover normal */

/* Cuando está flotando: barra siempre visible arriba (drag handle) */
.lb-block.lb-floating .lb-grip { display: none; }

.lb-block.lb-floating .lb-bar {
  opacity: 1;
  pointer-events: all;
  position: relative;
  top: auto;
  right: auto;
  border-radius: 0;
  height: 44px;
  cursor: grab;
  flex-shrink: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  order: -1; /* siempre arriba en el flex column */
}

.lb-block.lb-floating .lb-bar:active { cursor: grabbing; }

/* ── Label en la barra ──────────────────────────────────── */
.lb-label {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  min-width: 0;
}

/* ── Botones grandes en la barra ─────────────────────────── */
.lb-bar-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  color: rgba(255,255,255,0.7);
  border-radius: 6px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
  line-height: 1;
  flex-shrink: 0;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
}

.lb-bar-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
}

.lb-float-btn:hover  { color: #fbbf24; border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.12); }
.lb-float-btn.lb-float-on { color: #fbbf24; border-color: rgba(251,191,36,0.35); }

.lb-collapse-btn:hover { color: #60a5fa; border-color: rgba(96,165,250,0.4); background: rgba(96,165,250,0.1); }
.lb-note-del:hover     { color: #f87171; border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.1); }
.lb-pin-btn:hover      { color: #fbbf24; border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.1); }
.lb-dock-btn:hover     { color: #86efac; border-color: rgba(134,239,172,0.4); background: rgba(134,239,172,0.1); }

/* Separador entre grupos de botones */
.lb-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── Bloque flotante (position: fixed) ───────────────────── */
.lb-block.lb-floating {
  position: fixed !important;
  z-index: 500;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(100,160,255,0.25);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  /* Fondo sólido: el bloque ya no tiene la página detrás */
  background: #0d1428 !important;
}

/* Contenido interno scrolleable cuando flotante */
.lb-block.lb-floating > *:not(.lb-bar):not(.lb-resize-e):not(.lb-resize-s):not(.lb-resize-se) {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  font-size: var(--lb-block-fs, inherit);
}

/* Prevenir mini-scrollbars horizontales en elementos internos */
.lb-block.lb-floating * {
  max-width: 100%;
  overflow-x: visible;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
}

.lb-block.lb-dragging {
  opacity: 1;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(100,160,255,0.25);
  cursor: grabbing !important;
}

/* ── Resize handles (solo visibles en bloques flotantes y notas) ── */
.lb-resize-e,
.lb-resize-s,
.lb-resize-se {
  position: absolute;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.15s;
}

/* Borde derecho → resize ancho */
.lb-resize-e {
  top: 10px; right: 0; bottom: 10px;
  width: 8px;
  cursor: ew-resize;
}

/* Borde inferior → resize alto */
.lb-resize-s {
  left: 10px; right: 10px; bottom: 0;
  height: 8px;
  cursor: ns-resize;
}

/* Esquina inferior-derecha → resize libre */
.lb-resize-se {
  right: 0; bottom: 0;
  width: 18px; height: 18px;
  cursor: nwse-resize;
  /* Indicador visual: triángulo en la esquina */
  background: linear-gradient(135deg, transparent 50%, rgba(100,160,255,0.5) 50%);
  border-radius: 0 0 12px 0;
}

.lb-block.lb-floating:hover .lb-resize-e,
.lb-block.lb-floating:hover .lb-resize-s,
.lb-block.lb-floating:hover .lb-resize-se,
.lb-note:hover .lb-resize-e,
.lb-note:hover .lb-resize-s,
.lb-note:hover .lb-resize-se {
  opacity: 1;
}

/* Colapsado: solo muestra la barra */
.lb-block.lb-collapsed > *:not(.lb-bar):not(.lb-grip) {
  display: none !important;
}

/* ── SIN placeholder visible ─────────────────────────────── */
/* Cuando un bloque flota, el espacio colapsa naturalmente.
   Usamos un placeholder de altura 0 solo para poder re-dock. */
.lb-placeholder {
  display: none; /* invisible, solo existe para referencia del ID */
}

/* ── Notas ────────────────────────────────────────────────── */
/* Por defecto: sticky (position:fixed) — acompañan el scroll.
   Con .lb-note-pinned: se anclan al documento (position:absolute). */
.lb-note {
  position: fixed !important;
  z-index: 300;
  border-radius: 10px;
  overflow: hidden;
  width: 300px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(250,204,21,0.3);
  display: flex;
  flex-direction: column;
  /* Glass card que hereda el esquema de colores de la página */
  background: rgba(20, 30, 55, 0.96);
  backdrop-filter: blur(10px);
}

/* Nota anclada al documento */
.lb-note.lb-note-pinned {
  position: absolute !important;
}

.lb-note .lb-bar {
  background: rgba(60, 48, 8, 0.96);
  border-bottom: 1px solid rgba(250,204,21,0.2);
  cursor: grab;
  flex-shrink: 0;
}

.lb-note .lb-bar:active { cursor: grabbing; }

.lb-note-body {
  padding: 6px 12px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Controles de tamaño de letra dentro de cada nota */
.lb-note-fontsize {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 4px;
}

.lb-note-fs-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  border-radius: 4px;
  width: 22px; height: 22px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
  font-family: inherit;
  flex-shrink: 0;
}
.lb-note-fs-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }

.lb-note-fs-label {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  min-width: 28px;
  text-align: center;
  pointer-events: none;
  font-family: inherit;
}

.lb-textarea {
  display: block;
  width: 100%;
  min-height: 90px;
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  font-family: inherit;
  font-size: 13px; /* sobreescrito inline por los botones +/- de cada nota */
  line-height: 1.65;
  color: rgba(255,255,255,0.9);
  padding: 4px 0;
  box-sizing: border-box;
}

.lb-textarea::placeholder {
  color: rgba(255,255,255,0.28);
  font-style: italic;
}

/* ── Toolbar flotante ──────────────────────────────────────── */
.lb-toolbar {
  position: fixed;
  right: 16px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.lb-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 18, 42, 0.93);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(100,160,255,0.22);
  border-radius: 50px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: background 0.14s, border-color 0.14s, transform 0.12s;
  font-family: inherit;
}

.lb-toolbar-btn:hover {
  background: rgba(25,50,105,0.95);
  border-color: rgba(100,160,255,0.5);
  color: #fff;
  transform: translateX(-3px);
}

.lb-toolbar-btn.lb-btn-primary {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(59,130,246,0.4);
}

.lb-toolbar-btn.lb-btn-primary:hover {
  box-shadow: 0 6px 24px rgba(59,130,246,0.55);
  transform: translateX(-3px);
}

.lb-toolbar-btn.lb-btn-danger:hover {
  background: rgba(100,20,20,0.9);
  border-color: rgba(248,113,113,0.4);
  color: #fca5a5;
}

/* Font size */
.lb-fontsize {
  display: flex;
  align-items: center;
  background: rgba(10, 18, 42, 0.93);
  border: 1px solid rgba(100,160,255,0.22);
  border-radius: 50px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

.lb-fontsize-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 14px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  font-family: inherit;
  line-height: 1;
}

.lb-fontsize-btn:hover {
  color: #fff;
  background: rgba(100,160,255,0.18);
}

.lb-fontsize-label {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  padding: 0 6px;
  min-width: 34px;
  text-align: center;
  pointer-events: none;
  font-family: inherit;
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  .sidebar, .sidebar-indicator, .menu-toggle,
  .top-navbar, .progress-bar, .material-back-button,
  .ads-column, nav, .lb-grip, .lb-bar, .lb-toolbar {
    display: none !important;
  }

  .lb-block.lb-floating:not(.lb-note) { display: none !important; }

  body { background: #fff !important; color: #111 !important; }

  .lb-block { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }

  .lb-note {
    position: static !important;
    display: flex !important;
    border: 1px dashed #b7791f !important;
    background: #fffde7 !important;
    border-radius: 6px;
    margin: 10px 0;
    break-inside: avoid;
  }

  .lb-textarea { color: #111 !important; min-height: auto !important; }
}