/* Popup unificado de notas (ver app.js: npBuild/openNotasPopup y
   PLAN-POPUP-NOTAS-UNIFICADO.md). Overlay flotante de nivel superior --
   hijo directo de <body>, nunca anidado en #panelBody ni en
   #sermonComparePanelBody -- por eso es el mismo componente en modo estudio
   y en modo predicación. No existe ningún precedente de arrastre/
   redimensionado en el repo; el redimensionado usa la propiedad nativa CSS
   resize:both en vez de lógica propia (cubre "desde al menos una esquina"
   sin código adicional que pueda introducir bugs). El arrastre sí es JS
   propio (pointerdown/pointermove sobre el header), construido desde cero. */

.np-popup {
  position: fixed;
  display: flex;
  flex-direction: column;
  min-width: 280px;
  min-height: 220px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  resize: both;
  overflow: auto;
  background: color-mix(in srgb, var(--paper-raised) 88%, var(--ink) 12%);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  z-index: 4000;
  font-family: var(--font-body);
  color: var(--ink);
}
.np-popup[hidden] { display: none; }

.np-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
  border-radius: 10px 10px 0 0;
  cursor: move;
  touch-action: none;
  flex-shrink: 0;
}
.np-popup__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}
.np-popup__close {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.np-popup__close:hover { color: var(--wine); }

.np-popup__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.np-popup__tab {
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 9px;
  cursor: pointer;
}
.np-popup__tab--active {
  background: var(--chrome);
  color: var(--wine);
  border-color: var(--rule-strong);
  font-weight: 600;
}

.np-popup__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}
/* El redimensionado no debe partir palabras a la mitad -- overflow-wrap
   reflowa por palabra completa, y solo cae a break-word (nunca break-all)
   si una palabra individual es más larga que el ancho disponible. */
.np-popup__body,
.np-popup__body * {
  overflow-wrap: break-word;
}

.np-new-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}
.np-note-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.np-note-edit .personal-note-form__area { min-height: 160px; }

@media (max-width: 480px) {
  .np-popup__tabs { gap: 3px; }
  .np-popup__tab { font-size: 12px; padding: 5px 7px; }
}