/* widget.css — Widget flotante (硯).
 *
 * Se carga SIEMPRE junto a css/styles.css, también dentro de la ventana
 * Document Picture-in-Picture. De ahí sale el parecido: el widget hereda los
 * tokens, la tipografía, los componentes (.note-card, .folder-row, .nl-crumbs,
 * .seg, .note-blocks, .blk, .editor-title, .btn, .empty) y las animaciones
 * (.fade-in, .pop, .mode-swap-in) de la app. Los BLOQUES los construye app.js
 * con sus propios builders, así que aquí no hay estilos de bloque que mantener.
 *
 * Solo vive aquí lo propio del widget: la caja, la barra, el compositor y los
 * ajustes de tamaño para una ventana de ~440 px.
 *
 * Ojo: esa anchura activa las media queries móviles de styles.css DENTRO de la
 * ventana. Las que estorban se corrigen abajo con selectores `.wg …`.
 */

/* ---- Ventana PiP: el documento entero es el widget ---- */
.wg-body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.wg-body .wg {
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---- Caparazón ---- */
.wg {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}
.wg *,
.wg *::before,
.wg *::after { box-sizing: border-box; }
.wg .wg-hidden { display: none !important; }

/* Panel de respaldo en la página (Firefox, Safari): arrastrable por la barra.
   Encima de los avisos flotantes (PWA: 90) y bajo los diálogos (200+). */
.wg[data-mode="inline"] {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  width: 440px;
  height: 620px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.wg[data-mode="inline"] .wg-bar { cursor: grab; }
.wg[data-mode="inline"].wg-dragging .wg-bar { cursor: grabbing; }

/* ---- Modo burbuja: compactado a solo el logo ---- */
.wg .wg-bubble { display: none; }
.wg.wg-mini > .wg-bar,
.wg.wg-mini > .wg-main,
.wg.wg-mini > .wg-locked,
.wg.wg-mini > .wg-flash { display: none; }
.wg.wg-mini .wg-bubble {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--bg);
  cursor: pointer;
}
.wg-bubble .logo {
  font-size: 26px;
  line-height: 1;
  color: var(--seal);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wg.wg-mini .wg-bubble:hover .logo { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .wg-bubble .logo { transition: none; }
}
/* Panel en página: la caja entera se vuelve un círculo arrastrable. */
.wg[data-mode="inline"].wg-mini {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}
.wg[data-mode="inline"].wg-mini .wg-bubble { border-radius: 50%; cursor: grab; }
.wg[data-mode="inline"].wg-mini.wg-dragging .wg-bubble { cursor: grabbing; }
/* En PiP la ventana es del sistema (se encoge por JS): el logo llena el hueco. */
.wg-body .wg.wg-mini .wg-bubble .logo { font-size: 34px; }

/* ---- Barra superior ---- */
.wg-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  user-select: none;
}
.wg-bar .logo {
  font-size: 18px;
  line-height: 1;
  color: var(--seal);
}
.wg-bar-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wg-bar-title.faint { color: var(--text-soft); font-weight: 500; }
/* Gana a `.sb-action { height: 42px }` de la media query móvil de la app. */
.wg .wg-bar .sb-action {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}
.wg .wg-bar .sb-action .icon { width: 16px; height: 16px; }
.wg .wg-bar .sb-action.active {
  background: var(--accent-soft);
  border-color: var(--border-strong);
  color: var(--text);
}

/* ---- Cuerpo: una columna que ocupa el resto ---- */
.wg-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Pestañas de alcance: el .seg de la app, más compacto. */
.wg .wg-seg {
  flex: 0 0 auto;
  margin: 8px 10px 0;
}
.wg .wg-seg .seg-btn {
  gap: 4px;
  padding: 5px 4px;
  font-size: 11.5px;
}
.wg .wg-seg .seg-btn .icon { width: 14px; height: 14px; }
/* El thumb deslizante de la app se coloca con `:has(#scopeAll.active)`, y aquí
   las pestañas no llevan id: en el panel de respaldo el widget vive DENTRO del
   documento de la app, donde repetir esos id apuntaría a las pestañas de la
   ventana grande. Se posiciona por orden, que en el widget es fijo (Recientes ·
   Carpetas · Archivadas). Hace falta ganarle también a la regla de dos botones
   (`:last-child.active` → un tercio), que si no dejaría "Archivadas" a medias. */
.wg .wg-seg { display: flex; }
.wg .wg-seg .seg-btn { flex: 1; justify-content: center; }
.wg .wg-seg:has(.seg-btn:nth-child(2).active)::before { transform: translateX(calc(100% + 2px)); }
.wg .wg-seg:has(.seg-btn:nth-child(3).active)::before { transform: translateX(calc(200% + 4px)); }

/* Migas: las de la app, sin el aire del panel grande. */
.wg .wg-crumbs {
  flex: 0 0 auto;
  padding: 8px 12px 2px;
}

/* Buscador */
.wg-top {
  flex: 0 0 auto;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}
.wg-search {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.wg-search:focus {
  outline: none;
  border-color: var(--ring-input);
  background: var(--bg);
}
.wg-search::placeholder { color: var(--text-faint); }

/* ---- Lista: la .notes de la app con menos aire ---- */
.wg .notes {
  flex: 1;
  min-height: 0;
  padding: 8px;
  gap: 6px;
  scrollbar-width: thin;
}
.wg .note-card { padding: 9px 11px; }
.wg .note-card h4 { font-size: 13.5px; }
.wg .note-card .preview { font-size: 12.5px; }
.wg .note-card .meta { font-size: 11px; }
.wg .folder-row { padding: 8px 10px; }
.wg .empty.wg-empty { padding: 26px 14px; }

/* Campo "Añadir al final…" del pie de la vista de nota. */
.wg-compose {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  max-height: 120px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
  scrollbar-width: thin;
}
.wg-compose:focus {
  outline: none;
  border-color: var(--ring-input);
}
.wg-compose::placeholder { color: var(--text-faint); }
/* Botón de enviar: el .btn-primary de la app, cuadrado. */
.wg .wg-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
}
.wg .wg-send .icon { width: 16px; height: 16px; }

/* ---- Editor completo adoptado (#editorPane dentro del widget) ---- */
.wg-editor-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.wg-editor-host #editorPane { flex: 1; min-height: 0; }
/* El widget no dibuja ni cambia de modo: fuera el toggle Nota/Dibujo; el
   "volver" móvil y el ancho de nota tampoco aplican en una ventana de 440 px. */
.wg-editor-host #noteTypeToggle,
.wg-editor-host #backToNotes,
.wg-editor-host #noteWidth { display: none !important; }

/* ---- Vista de nota ---- */
.wg-note {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.wg .wg-note .editor-title {
  flex: 0 0 auto;
  margin: 12px 12px 4px;
  width: auto;
  font-size: 20px;
}
.wg .wg-note .editor-title:focus { outline: none; }
.wg-note-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-faint);
}
.wg-note-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.wg-note-meta .icon { width: 13px; height: 13px; }
.wg-note-state { margin-left: auto; }
.wg-note-state.saved { color: var(--ok); }
.wg-note-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  scrollbar-width: thin;
}
/* Los bloques vienen de la app; aquí solo se les da el ancho de la ventana. */
.wg .wg-blocks { max-width: 100%; }
.wg .wg-blocks .blk { max-width: 100%; }
/* Las tres reglas que styles.css cuelga de `#noteBlocks` —y que por tanto no
   alcanzan a este contenedor— repetidas para el widget:
   1. el contador de secciones, o los números empezarían donde los dejó la app;
   2. las herramientas y tiradores de imagen, que en solo lectura no van. */
.wg .wg-blocks { counter-reset: secnum; }
.wg .wg-blocks.locked .img-tools,
.wg .wg-blocks.locked .img-handle { display: none; }
.wg .wg-blocks.locked .img-el { cursor: default; }
.wg-note-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.wg-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 10px;
  padding: 7px 9px;
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 11.5px;
  line-height: 1.4;
}
.wg-notice .icon { width: 14px; height: 14px; margin-top: 1px; }

/* ---- Baúl bloqueado ---- */
.wg-locked {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
  color: var(--text-soft);
}
.wg-locked .icon { width: 26px; height: 26px; color: var(--text-faint); }
.wg-locked p { margin: 0; font-size: 13px; }

/* ---- Aviso efímero ---- */
.wg-flash {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translate(-50%, 6px);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 28px);
  padding: 6px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text);
  font: 500 11.5px/1 var(--font);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.wg-flash.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.wg-flash .icon { width: 14px; height: 14px; color: var(--ok); }

/* El botón que abre el widget: solo en escritorio, donde hay ventanas que
   flotar. Bajo 880 px la app pasa a su disposición móvil. */
@media (max-width: 880px) {
  #openWidget { display: none !important; }
}