/* /funcionalidades/notas/ — the Notes window floating over the Clients list,
   opened from the top bar's New note launcher. Three scenes
   (pantallas-escenas.js): 0 Elena writes her last to-do; 1 she dictates;
   2 the note became a task — the resting state. Every rule states the
   resting frame; each scene overrides what differs. */

.pn-frame[data-screen="notes"] {
  --nt-primary: #4c7a5d;
  --nt-soft: #e7efe9;
  --nt-surface: #f7f7f5;
  --nt-line: rgb(17 19 24 / 0.09);
  --nt-faint: rgb(17 19 24 / 0.42);
  --nt-danger: #d4493f;
}

.pn-frame[data-screen="notes"] .nt-i { width: 12px; height: 12px; flex-shrink: 0; }

/* The screen underneath stays readable but steps back. */
.pn-frame[data-screen="notes"] .pn-body { opacity: 0.55; }

/* The launcher the window came from. */
.pn-frame[data-screen="notes"] .ac-top-btn.is-note.is-lit { background: var(--nt-soft); color: var(--nt-primary); }

/* One version per state; data-at lists the scenes it belongs to. */
.pn-frame[data-screen="notes"] .nt-states { display: inline-grid; }
.pn-frame[data-screen="notes"] .nt-states > i { grid-area: 1 / 1; font-style: normal; visibility: hidden; }
.pn-frame[data-screen="notes"][data-mk-scene="0"] .nt-states > i[data-at~="0"],
.pn-frame[data-screen="notes"][data-mk-scene="1"] .nt-states > i[data-at~="1"],
.pn-frame[data-screen="notes"][data-mk-scene="2"] .nt-states > i[data-at~="2"] { visibility: visible; }

/* ---------- the window ---------- */

.pn-frame[data-screen="notes"] .nt-window {
  position: absolute;
  z-index: 4;
  top: 62px;
  right: 22px;
  bottom: 18px;
  left: 236px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--nt-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 60px rgb(17 19 24 / 0.22), 0 4px 12px rgb(17 19 24 / 0.08);
  color: #111318;
}

.pn-frame[data-screen="notes"] .nt-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--nt-line);
  color: var(--nt-faint);
}

.pn-frame[data-screen="notes"] .nt-head b { flex: 1; overflow: hidden; color: #111318; font-size: 11.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pn-frame[data-screen="notes"] .nt-controls { display: flex; gap: 2px; padding-left: 6px; border-left: 1px solid var(--nt-line); }

.pn-frame[data-screen="notes"] .nt-tool {
  display: grid;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 7px;
  color: rgb(17 19 24 / 0.6);
}

.pn-frame[data-screen="notes"] .nt-work { display: flex; flex: 1; min-height: 0; }

/* ---------- folders ---------- */

.pn-frame[data-screen="notes"] .nt-folders {
  display: flex;
  flex: 0 0 148px;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px 10px;
  border-right: 1px solid var(--nt-line);
  background: var(--nt-surface);
}

.pn-frame[data-screen="notes"] .nt-folders-title { padding: 8px 8px 9px; font-size: 11.5px; font-weight: 650; }

.pn-frame[data-screen="notes"] .nt-folder,
.pn-frame[data-screen="notes"] .nt-folder-add {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  color: rgb(17 19 24 / 0.72);
  font-size: 10.5px;
}

.pn-frame[data-screen="notes"] .nt-folder.is-on { background: var(--nt-soft); color: var(--nt-primary); font-weight: 600; }
.pn-frame[data-screen="notes"] .nt-folder-add { margin-top: 8px; color: var(--nt-faint); }

.pn-frame[data-screen="notes"] .nt-private {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: auto;
  padding: 0 8px;
  color: var(--nt-faint);
  font-size: 9.5px;
  line-height: 1.4;
}

/* ---------- the list ---------- */

.pn-frame[data-screen="notes"] .nt-list {
  display: flex;
  flex: 0 0 226px;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--nt-line);
}

.pn-frame[data-screen="notes"] .nt-list-head { display: flex; align-items: center; padding: 10px 8px 4px 14px; }
.pn-frame[data-screen="notes"] .nt-list-head b { flex: 1; font-size: 11.5px; font-weight: 650; }

.pn-frame[data-screen="notes"] .nt-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 10px 6px;
  padding: 6px 9px;
  border: 1px solid var(--nt-line);
  border-radius: 8px;
  background: var(--nt-surface);
  color: var(--nt-faint);
  font-size: 10px;
}

.pn-frame[data-screen="notes"] .nt-items { flex: 1; min-height: 0; overflow: hidden; padding: 0 6px; }
.pn-frame[data-screen="notes"] .nt-group { padding: 10px 8px 4px; color: var(--nt-faint); font-size: 9.5px; font-weight: 650; }
.pn-frame[data-screen="notes"] .nt-group:first-letter { text-transform: uppercase; }

.pn-frame[data-screen="notes"] .nt-item { padding: 7px 8px; border-radius: 9px; }
.pn-frame[data-screen="notes"] .nt-item.is-on { background: var(--nt-soft); }
.pn-frame[data-screen="notes"] .nt-item-title { display: flex; align-items: center; gap: 6px; }
.pn-frame[data-screen="notes"] .nt-item-title b { flex: 1; overflow: hidden; font-size: 10.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pn-frame[data-screen="notes"] .nt-pin { color: var(--nt-primary); }
.pn-frame[data-screen="notes"] .nt-item-preview { margin-top: 2px; overflow: hidden; color: rgb(17 19 24 / 0.6); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.pn-frame[data-screen="notes"] .nt-item em { display: block; margin-top: 2px; color: var(--nt-faint); font-size: 8.5px; font-style: normal; }

/* ---------- the open note ---------- */

.pn-frame[data-screen="notes"] .nt-detail { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }

.pn-frame[data-screen="notes"] .nt-title-row { display: flex; align-items: center; gap: 2px; padding: 10px 10px 4px 16px; }
.pn-frame[data-screen="notes"] .nt-title { flex: 1; overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }

.pn-frame[data-screen="notes"] .nt-format {
  display: flex;
  align-items: center;
  gap: 1px;
  margin: 2px 12px 0;
  padding: 3px 4px;
  border: 1px solid var(--nt-line);
  border-radius: 9px;
}

.pn-frame[data-screen="notes"] .nt-format .nt-tool { width: 22px; height: 22px; }
.pn-frame[data-screen="notes"] .nt-block { display: flex; align-items: center; gap: 4px; padding: 0 6px; font-size: 10px; }
.pn-frame[data-screen="notes"] .nt-sep { width: 1px; height: 14px; margin: 0 3px; background: var(--nt-line); }

.pn-frame[data-screen="notes"] .nt-doc { flex: 1; min-height: 0; overflow: hidden; padding: 14px 18px 0; font-size: 11px; line-height: 1.55; }
.pn-frame[data-screen="notes"] .nt-doc h4 { margin: 12px 0 4px; font-size: 11.5px; font-weight: 700; }
.pn-frame[data-screen="notes"] .nt-bullets { margin: 0; padding-left: 16px; list-style: disc; }
.pn-frame[data-screen="notes"] .nt-todos { margin: 0; padding: 0; list-style: none; }
.pn-frame[data-screen="notes"] .nt-todo { display: flex; align-items: center; gap: 7px; padding: 1px 0; }
.pn-frame[data-screen="notes"] .nt-todo.is-done span { color: var(--nt-faint); text-decoration: line-through; }

.pn-frame[data-screen="notes"] .nt-box {
  display: grid;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  place-items: center;
  border: 1.5px solid rgb(17 19 24 / 0.35);
  border-radius: 3px;
}

.pn-frame[data-screen="notes"] .nt-todo.is-done .nt-box { border-color: var(--nt-primary); background: var(--nt-primary); color: #fff; }
.pn-frame[data-screen="notes"] .nt-box .nt-i { width: 9px; height: 9px; }

.pn-frame[data-screen="notes"] .nt-caret {
  display: none;
  width: 1.5px;
  height: 12px;
  margin-left: 1px;
  vertical-align: -2px;
  background: #111318;
  animation: nt-blink 1s steps(1) infinite;
}

@keyframes nt-blink { 50% { opacity: 0; } }

.pn-frame[data-screen="notes"] .nt-foot {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 1px;
  padding: 6px 12px 6px 16px;
  border-top: 1px solid var(--nt-line);
}

.pn-frame[data-screen="notes"] .nt-status { margin-right: auto; color: var(--nt-faint); font-size: 9.5px; }

.pn-frame[data-screen="notes"] .nt-task {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  padding: 5px 9px;
  border: 1px solid var(--nt-line);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.pn-frame[data-screen="notes"] .nt-task { border-color: var(--nt-primary); background: var(--nt-primary); color: #fff; }

/* The recorder, over the note's lower right corner while dictating. */
.pn-frame[data-screen="notes"] .nt-recorder {
  position: absolute;
  right: 12px;
  bottom: 46px;
  width: 260px;
  padding: 11px 12px;
  border: 1px solid var(--nt-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 32px rgb(17 19 24 / 0.16);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.pn-frame[data-screen="notes"] .nt-rec-head { display: flex; align-items: center; gap: 6px; font-size: 10.5px; }
.pn-frame[data-screen="notes"] .nt-rec-head em { font-style: normal; font-variant-numeric: tabular-nums; }
.pn-frame[data-screen="notes"] .nt-rec-head span { margin-left: auto; color: var(--nt-faint); font-size: 9.5px; }
.pn-frame[data-screen="notes"] .nt-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nt-danger); animation: nt-blink 1.2s steps(1) infinite; }
.pn-frame[data-screen="notes"] .nt-rec-wave { display: flex; align-items: center; gap: 3px; height: 26px; margin: 8px 0; }
.pn-frame[data-screen="notes"] .nt-rec-wave i { flex: 1; height: calc(var(--v) * 100%); border-radius: 2px; background: var(--nt-primary); opacity: 0.75; }
.pn-frame[data-screen="notes"] .nt-rec-actions { display: flex; justify-content: flex-end; gap: 6px; }
.pn-frame[data-screen="notes"] .nt-btn { padding: 5px 10px; border: 1px solid var(--nt-line); border-radius: 8px; font-size: 10px; font-weight: 600; }
.pn-frame[data-screen="notes"] .nt-btn.is-primary { border-color: var(--nt-primary); background: var(--nt-primary); color: #fff; }

/* The window's own confirmation once the task exists. */
.pn-frame[data-screen="notes"] .nt-toast {
  position: absolute;
  right: 12px;
  bottom: 46px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #111318;
  color: #fff;
  font-size: 10.5px;
  box-shadow: 0 14px 32px rgb(17 19 24 / 0.22);
  transition: opacity 240ms ease, transform 240ms ease;
}

.pn-frame[data-screen="notes"] .nt-toast .nt-i { color: #8fd3a4; }

.pn-frame[data-screen="notes"] .nt-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  border-right: 2px solid rgb(76 122 93 / 0.5);
  border-bottom: 2px solid rgb(76 122 93 / 0.5);
  border-bottom-right-radius: 16px;
}

/* ---------- the scenes ---------- */

/* 0 — writing: the caret on the last to-do, no task yet. */
.pn-frame[data-screen="notes"][data-mk-scene="0"] .nt-caret { display: inline-block; }

/* 1 — dictating: the recorder is up and the microphone lit. */
.pn-frame[data-screen="notes"][data-mk-scene="1"] .nt-recorder { opacity: 1; transform: none; }
.pn-frame[data-screen="notes"][data-mk-scene="1"] .nt-tool.is-mic { background: #fbe9e7; color: var(--nt-danger); }

/* Before the last scene, Create task is just a button and there is no toast. */
.pn-frame[data-screen="notes"][data-mk-scene="0"] .nt-task,
.pn-frame[data-screen="notes"][data-mk-scene="1"] .nt-task { border-color: var(--nt-line); background: transparent; color: #111318; }
.pn-frame[data-screen="notes"][data-mk-scene="0"] .nt-toast,
.pn-frame[data-screen="notes"][data-mk-scene="1"] .nt-toast { opacity: 0; transform: translateY(6px); }

@media (prefers-reduced-motion: reduce) {
  .pn-frame[data-screen="notes"] .nt-caret,
  .pn-frame[data-screen="notes"] .nt-rec-dot { animation: none; }
  .pn-frame[data-screen="notes"] .nt-recorder,
  .pn-frame[data-screen="notes"] .nt-toast,
  .pn-frame[data-screen="notes"] .nt-task { transition: none; }
}