/* ============================================================
   Muro de NOTAS — Acambuco
   Panel deslizante lateral derecho + pestaña "Notas" + tarjetas.
   Portado del hub interinstitucional; self-contained con tokens
   propios (--nw-*) para no depender de variables de styles.css ni
   colisionar con otras reglas. Prefijos .notes-/.note- intactos.
   ============================================================ */
.notes-panel,
.notes-confirm-backdrop,
.notes-form-modal-backdrop {
  --nw-action: #0f5fa6;
  --nw-action-hover: #0b4e86;
  --nw-ink-strong: #042c53;
  --nw-ink-soft: #44607f;
  --nw-accent: #2a89e6;
  --nw-danger: #b91c1c;
  --nw-panel-width: 340px;
  --nw-panel-gap: 18px;
  --nw-safe-right: env(safe-area-inset-right, 0px);
  --nw-safe-top: env(safe-area-inset-top, 0px);
  --nw-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nw-t-fast: 0.14s;
  --nw-t-med: 0.22s;
  --nw-t-slow: 0.36s;
  --nw-elev-1: 0 6px 18px rgba(10, 50, 101, 0.12);
}

/* ---------- Contenedor + pestaña ---------- */
.notes-panel {
  position: fixed;
  top: 50%;
  right: var(--nw-safe-right);
  transform: translateY(-50%);
  z-index: 1400;
  width: 0;
  pointer-events: none;
  font-family: inherit;
}
.notes-toggle {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--nw-action) 0%, var(--nw-action) 85%, rgba(11, 95, 198, 0.18) 100%);
  color: #ffffff;
  border: 0;
  padding: 18px 8px 14px 8px;
  border-radius: 14px 0 0 14px;
  box-shadow: -6px 8px 24px rgba(10, 50, 101, 0.26);
  cursor: pointer;
  transition:
    right var(--nw-t-slow) var(--nw-ease),
    background var(--nw-t-med) var(--nw-ease),
    box-shadow var(--nw-t-med) var(--nw-ease);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.notes-toggle-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
}
.notes-toggle:hover,
.notes-toggle:focus-visible {
  background: linear-gradient(180deg, var(--nw-action-hover), var(--nw-action));
  box-shadow: -8px 10px 28px rgba(10, 50, 101, 0.32);
  outline: none;
}
.notes-panel.is-open .notes-toggle {
  right: calc(var(--nw-panel-width) + var(--nw-panel-gap));
  box-shadow: -4px 6px 18px rgba(10, 50, 101, 0.22);
}

/* ---------- Badge contador ---------- */
.notes-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ffffff;
  color: var(--nw-ink-strong);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(10, 50, 101, 0.22);
}
.notes-count[hidden] { display: none; }
@keyframes nwCountPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.notes-count.is-pulsing { animation: nwCountPulse 0.5s ease-in-out 2; }

/* ---------- Contenido del panel (desliza) ---------- */
.notes-panel-content {
  position: absolute;
  top: 50%;
  right: var(--nw-panel-gap);
  transform: translate(calc(100% + var(--nw-panel-gap)), -50%);
  width: var(--nw-panel-width);
  max-width: calc(100vw - 2 * var(--nw-panel-gap));
  height: clamp(420px, 72vh, 640px);
  max-height: calc(100vh - 2 * var(--nw-panel-gap));
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
  backdrop-filter: blur(18px) saturate(1.04);
  border: 1px solid rgba(45, 127, 208, 0.18);
  border-radius: 16px;
  box-shadow:
    0 2px 8px rgba(10, 50, 101, 0.08),
    0 30px 80px rgba(10, 50, 101, 0.14);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  transition: transform var(--nw-t-slow) var(--nw-ease);
  overflow: hidden;
}
.notes-panel.is-open .notes-panel-content {
  transform: translate(0, -50%);
}

/* ---------- Header ---------- */
.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(180deg, var(--nw-ink-strong), var(--nw-action));
  color: #ffffff;
}
.notes-header h2 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.notes-header h2::before {
  content: "";
  width: 5px;
  height: 22px;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}
.notes-close {
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  opacity: 0.85;
  transition: background var(--nw-t-fast) var(--nw-ease), opacity var(--nw-t-fast) var(--nw-ease);
}
.notes-close::after { content: ""; position: absolute; inset: -8px -3px; }
.notes-close:hover,
.notes-close:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.24);
  outline: none;
}

/* ---------- Barra informativa ---------- */
.notes-auth-bar {
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(245, 250, 255, 0.92), rgba(255, 255, 255, 0.88));
  border-bottom: 1px solid rgba(45, 127, 208, 0.12);
  font-size: 0.72rem;
  color: var(--nw-ink-soft);
}
.notes-auth-bar:empty { display: none; padding: 0; border: 0; }
.notes-signin-text { margin: 0; color: #566f8e; line-height: 1.4; }
.notes-signin-text-local { font-style: italic; }

/* ---------- Lista ---------- */
.notes-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(45, 127, 208, 0.35) transparent;
}
.notes-list::-webkit-scrollbar { width: 6px; }
.notes-list::-webkit-scrollbar-thumb { background: rgba(45, 127, 208, 0.35); border-radius: 3px; }
.notes-empty {
  text-align: center;
  padding: 28px 14px;
  color: #566f8e;
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.5;
}

/* ---------- Tarjeta de nota ---------- */
.note-item {
  background: linear-gradient(180deg, #ffffff, #f5f9ff);
  border: 1px solid rgba(45, 127, 208, 0.14);
  border-left: 3px solid var(--nw-accent);
  border-radius: 10px;
  padding: 10px 12px;
  transition:
    border-color var(--nw-t-med) var(--nw-ease),
    box-shadow var(--nw-t-med) var(--nw-ease),
    transform var(--nw-t-med) var(--nw-ease);
}
.note-item:hover {
  border-color: rgba(45, 127, 208, 0.32);
  border-left-color: var(--nw-action);
  box-shadow: var(--nw-elev-1);
  transform: translateY(-1px);
}
.note-title {
  margin: 0 0 4px 0;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--nw-ink-strong);
  line-height: 1.3;
  word-wrap: break-word;
}
.note-content {
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--nw-ink-soft);
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed rgba(45, 127, 208, 0.16);
  font-size: 0.6875rem;
  color: #5a7494;
}
.note-meta-info { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.note-date { white-space: nowrap; }
.note-author {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #566f8e;
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-author::before { content: "·"; font-weight: 800; opacity: 0.6; }
.note-actions { display: flex; gap: 4px; }
.note-actions button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a99ad;
  border-radius: 6px;
  transition: background var(--nw-t-fast) var(--nw-ease), color var(--nw-t-fast) var(--nw-ease);
}
.note-actions button svg { width: 14px; height: 14px; display: block; }
.note-actions button:hover,
.note-actions button:focus-visible {
  background: rgba(45, 127, 208, 0.1);
  color: var(--nw-ink-strong);
  outline: none;
}
.note-actions .note-delete:hover,
.note-actions .note-delete:focus-visible {
  background: rgba(220, 38, 38, 0.1);
  color: var(--nw-danger);
}

/* ---------- Botón nueva + form ---------- */
.notes-new {
  margin: 6px 14px 12px 14px;
  padding: 12px 14px;
  background: transparent;
  color: var(--nw-action);
  border: 1.5px dashed rgba(45, 127, 208, 0.4);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--nw-t-med) var(--nw-ease), border-color var(--nw-t-med) var(--nw-ease), color var(--nw-t-med) var(--nw-ease);
}
.notes-new:hover,
.notes-new:focus-visible {
  background: rgba(45, 127, 208, 0.06);
  border-color: rgba(45, 127, 208, 0.72);
  border-style: solid;
  color: var(--nw-ink-strong);
  outline: none;
}
.notes-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(45, 127, 208, 0.14);
  background: rgba(245, 250, 255, 0.6);
}
.notes-form[hidden] { display: none; }
.notes-form input,
.notes-form textarea {
  width: 100%;
  border: 1px solid rgba(45, 127, 208, 0.22);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--nw-ink-strong);
  background: #ffffff;
  box-sizing: border-box;
  transition: border-color var(--nw-t-fast) var(--nw-ease), box-shadow var(--nw-t-fast) var(--nw-ease);
}
.notes-form input::placeholder,
.notes-form textarea::placeholder { color: #98aac4; }
.notes-form input:focus,
.notes-form textarea:focus {
  outline: none;
  border-color: var(--nw-action);
  box-shadow: 0 0 0 3px rgba(45, 127, 208, 0.18);
}
.notes-form textarea { min-height: 84px; max-height: 200px; resize: vertical; line-height: 1.4; }
.notes-form-actions { display: flex; gap: 6px; justify-content: flex-end; }
.notes-form-actions button {
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--nw-t-fast) var(--nw-ease), background var(--nw-t-fast) var(--nw-ease);
}
.notes-form-actions button[type="submit"] {
  background: linear-gradient(180deg, var(--nw-action) 0%, rgba(11, 95, 198, 0.5) 100%);
  color: #ffffff;
}
.notes-form-actions button[type="submit"]:hover { filter: brightness(1.08); }
.notes-cancel { background: rgba(45, 127, 208, 0.1); color: var(--nw-ink-strong); }
.notes-cancel:hover { background: rgba(45, 127, 208, 0.18); }

/* ---------- Modal de confirmación de borrado ---------- */
.notes-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 30, 56, 0.46);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nw-t-med) var(--nw-ease);
  font-family: inherit;
}
.notes-confirm-backdrop.is-open { opacity: 1; pointer-events: auto; }
.notes-confirm {
  width: min(380px, 100%);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(10, 50, 101, 0.3);
  padding: 22px 22px 18px 22px;
  transform: translateY(8px) scale(0.98);
  transition: transform var(--nw-t-med) var(--nw-ease);
}
.notes-confirm-backdrop.is-open .notes-confirm { transform: translateY(0) scale(1); }
.notes-confirm__title {
  margin: 0 0 8px 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--nw-ink-strong);
}
.notes-confirm__text {
  margin: 0 0 18px 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--nw-ink-soft);
}
.notes-confirm__actions { display: flex; gap: 8px; justify-content: flex-end; }
.notes-confirm__actions button {
  padding: 9px 16px;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--nw-t-fast) var(--nw-ease), filter var(--nw-t-fast) var(--nw-ease), box-shadow var(--nw-t-fast) var(--nw-ease);
}
.notes-confirm__cancel { background: rgba(45, 127, 208, 0.12); color: var(--nw-ink-strong); }
.notes-confirm__cancel:hover,
.notes-confirm__cancel:focus-visible { background: rgba(45, 127, 208, 0.2); outline: none; }
.notes-confirm__delete { background: var(--nw-danger); color: #ffffff; }
.notes-confirm__delete:hover { filter: brightness(1.08); }
.notes-confirm__delete:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.32); }

/* ---------- Modal del FORM (SOLO mobile) ---------- */
/* El #notes-form se reubica acá por JS en ≤980px; en desktop va inline en el
   panel y este backdrop nunca se muestra (blindado abajo). */
.notes-form-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(8, 30, 56, 0.46);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nw-t-med) var(--nw-ease);
  font-family: inherit;
}
.notes-form-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.notes-form-modal {
  width: min(440px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(10, 50, 101, 0.3);
  padding: 20px;
  transform: translateY(8px) scale(0.98);
  transition: transform var(--nw-t-med) var(--nw-ease);
}
.notes-form-modal-backdrop.is-open .notes-form-modal { transform: none; }
.notes-form-modal__title {
  margin: 0 0 12px 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--nw-ink-strong);
}
/* form reubicado: sin el chrome del panel (borde/tinte/padding) */
.notes-form-modal .notes-form {
  border-top: 0;
  background: transparent;
  padding: 0;
}
/* BLINDAJE: en desktop el form-modal NO existe visualmente (form inline). */
@media (min-width: 981px) {
  .notes-form-modal-backdrop { display: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* En mobile el sitio tiene chrome FIJO arriba: header (z 2000, ~105px) +
     banner "Sesión activa" (z 1700, hasta ~157px). El panel se ancla DEBAJO de
     ese chrome (no centrado) y sube su z sobre el banner para que su header
     "Notas" y el botón cerrar queden siempre visibles. La pestaña se fija al
     viewport, centrada vertical. */
  .notes-panel {
    z-index: 1750;
    top: 0;
    transform: none;
  }
  .notes-toggle {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
  }
  /* La pestaña SIGUE VISIBLE con el panel abierto: fija al borde derecho; el
     panel se abre a su izquierda dejándola asomar (no la tapa). */
  .notes-panel.is-open .notes-toggle {
    right: 0;
  }
  /* Panel flotante CONTENIDO: con aire arriba y abajo (no llena la pantalla) y
     dejando ~46px a la derecha para que la pestaña asome. Alto ~58vh acotado;
     min 360px para no colapsar con 0 notas (sin exagerar). */
  .notes-panel-content {
    top: calc(180px + var(--nw-safe-top));
    right: 46px;
    transform: translate(calc(100% + 46px), 0);
    width: calc(100vw - 58px);
    max-width: calc(100vw - 58px);
    height: clamp(360px, 58vh, 520px);
    max-height: calc(100vh - 180px - var(--nw-safe-top) - 16px);
  }
  .notes-panel.is-open .notes-panel-content {
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .notes-toggle,
  .notes-panel-content,
  .note-item,
  .notes-confirm,
  .notes-confirm-backdrop,
  .notes-form-modal,
  .notes-form-modal-backdrop { transition: none; }
  .notes-count.is-pulsing { animation: none; }
}