/* Part-of-speech colouring + word-step navigation
   Words in the reader are wrapped in <span class="dw"> when first interacted
   with; the looked-up word gets .dw-cur and a .pos-<category> class. */

:root {
  --pos-noun:   #1f6feb;  /* sustantivo  — azul   */
  --pos-verb:   #c0392b;  /* verbo       — rojo   */
  --pos-adj:    #2e8b57;  /* adjetivo    — verde  */
  --pos-adv:    #b8860b;  /* adverbio    — oro     */
  --pos-pron:   #8e44ad;  /* pronombre   — púrpura */
  --pos-prep:   #e67e22;  /* preposición — naranja */
  --pos-conj:   #1098ad;  /* conjunción  — turquesa*/
  --pos-interj: #d81b60;  /* interjección— rosa    */
  --pos-art:    #6c757d;  /* artículo    — gris    */
  --pos-num:    #5d4037;  /* número      — marrón  */
  --pos-part:   #00838f;  /* partícula   — petróleo*/
  --pos-other:  #555;
}

/* In-text word tokens */
.dw { cursor: pointer; border-radius: 2px; }
.dw:hover { background: rgba(176, 141, 46, .14); }

/* Current / selected word — rendered as the karaoke pill (same look as
   playback): a rounded pill, slightly wider than the word, coloured by part of
   speech when known (rules below), else the yellow default. */
.dw-cur {
  background: #f6d77a;
  color: #1a1a1a;
  box-shadow: 0 0 0 1px #b08d2e inset;
  border-radius: 3px;
  padding: 1px 0.22em;
  margin: 0 -0.22em;
}

/* Colour the current word's text by part of speech */
.dw.pos-noun   { color: var(--pos-noun);   box-shadow: 0 2px 0 -1px var(--pos-noun); }
.dw.pos-verb   { color: var(--pos-verb);   box-shadow: 0 2px 0 -1px var(--pos-verb); }
.dw.pos-adj    { color: var(--pos-adj);    box-shadow: 0 2px 0 -1px var(--pos-adj); }
.dw.pos-adv    { color: var(--pos-adv);    box-shadow: 0 2px 0 -1px var(--pos-adv); }
.dw.pos-pron   { color: var(--pos-pron);   box-shadow: 0 2px 0 -1px var(--pos-pron); }
.dw.pos-prep   { color: var(--pos-prep);   box-shadow: 0 2px 0 -1px var(--pos-prep); }
.dw.pos-conj   { color: var(--pos-conj);   box-shadow: 0 2px 0 -1px var(--pos-conj); }
.dw.pos-interj { color: var(--pos-interj); box-shadow: 0 2px 0 -1px var(--pos-interj); }
.dw.pos-art    { color: var(--pos-art);    box-shadow: 0 2px 0 -1px var(--pos-art); }
.dw.pos-num    { color: var(--pos-num);    box-shadow: 0 2px 0 -1px var(--pos-num); }
.dw.pos-part   { color: var(--pos-part);   box-shadow: 0 2px 0 -1px var(--pos-part); }
.dw.pos-other  { color: var(--pos-other); }
/* Selected word in its POS colour — a solid pill with white text, matching the
   karaoke highlight (.ab-w.ab-on.pos-*). Overrides the .dw.pos-* text colour. */
.dw-cur.pos-noun   { background: var(--pos-noun);   color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-verb   { background: var(--pos-verb);   color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-adj    { background: var(--pos-adj);    color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-adv    { background: var(--pos-adv);    color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-pron   { background: var(--pos-pron);   color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-prep   { background: var(--pos-prep);   color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-conj   { background: var(--pos-conj);   color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-interj { background: var(--pos-interj); color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-art    { background: var(--pos-art);    color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-num    { background: var(--pos-num);    color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-part   { background: var(--pos-part);   color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }
.dw-cur.pos-other  { background: var(--pos-other);  color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.28) inset; }

/* Card word + POS badge tinted to the category */
.greb-dict-card .gd-word.pos-noun   { color: var(--pos-noun); }
.greb-dict-card .gd-word.pos-verb   { color: var(--pos-verb); }
.greb-dict-card .gd-word.pos-adj    { color: var(--pos-adj); }
.greb-dict-card .gd-word.pos-adv    { color: var(--pos-adv); }
.greb-dict-card .gd-word.pos-pron   { color: var(--pos-pron); }
.greb-dict-card .gd-word.pos-prep   { color: var(--pos-prep); }
.greb-dict-card .gd-word.pos-conj   { color: var(--pos-conj); }
.greb-dict-card .gd-word.pos-interj { color: var(--pos-interj); }
.greb-dict-card .gd-word.pos-art    { color: var(--pos-art); }
.greb-dict-card .gd-word.pos-num    { color: var(--pos-num); }
.greb-dict-card .gd-word.pos-part   { color: var(--pos-part); }

.greb-dict-card .gd-pos {
  color: #fff !important;
  border: 0 !important;
  background: var(--pos-other);
}
.greb-dict-card .gd-pos.pos-noun   { background: var(--pos-noun); }
.greb-dict-card .gd-pos.pos-verb   { background: var(--pos-verb); }
.greb-dict-card .gd-pos.pos-adj    { background: var(--pos-adj); }
.greb-dict-card .gd-pos.pos-adv    { background: var(--pos-adv); }
.greb-dict-card .gd-pos.pos-pron   { background: var(--pos-pron); }
.greb-dict-card .gd-pos.pos-prep   { background: var(--pos-prep); }
.greb-dict-card .gd-pos.pos-conj   { background: var(--pos-conj); }
.greb-dict-card .gd-pos.pos-interj { background: var(--pos-interj); }
.greb-dict-card .gd-pos.pos-art    { background: var(--pos-art); }
.greb-dict-card .gd-pos.pos-num    { background: var(--pos-num); }
.greb-dict-card .gd-pos.pos-part   { background: var(--pos-part); }

/* Legend */
.greb-dict-card .gd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #d8cfb4;
}
.greb-dict-card .gd-leg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: .02em;
  color: #6b6256;
  opacity: .6;
}
.greb-dict-card .gd-leg-on { opacity: 1; font-weight: 700; color: #1a1a1a; }
.greb-dict-card .gd-leg-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pos-other); display: inline-block;
}
.greb-dict-card .gd-leg.pos-noun   .gd-leg-dot { background: var(--pos-noun); }
.greb-dict-card .gd-leg.pos-verb   .gd-leg-dot { background: var(--pos-verb); }
.greb-dict-card .gd-leg.pos-adj    .gd-leg-dot { background: var(--pos-adj); }
.greb-dict-card .gd-leg.pos-adv    .gd-leg-dot { background: var(--pos-adv); }
.greb-dict-card .gd-leg.pos-pron   .gd-leg-dot { background: var(--pos-pron); }
.greb-dict-card .gd-leg.pos-prep   .gd-leg-dot { background: var(--pos-prep); }
.greb-dict-card .gd-leg.pos-conj   .gd-leg-dot { background: var(--pos-conj); }

.greb-dict-card .gd-nav-hint {
  margin-top: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  color: #9a917f;
  letter-spacing: .03em;
}

/* ── Card accent tinted to the word's part of speech ───────────── */
/* Each category exposes its colour as --gd-accent; the popup border,
   shadow, header rule and the pinned-pin chip all read from it. */
.greb-dict-card            { --gd-accent: #8a6f3a; }
.greb-dict-card.pos-noun   { --gd-accent: var(--pos-noun); }
.greb-dict-card.pos-verb   { --gd-accent: var(--pos-verb); }
.greb-dict-card.pos-adj    { --gd-accent: var(--pos-adj); }
.greb-dict-card.pos-adv    { --gd-accent: var(--pos-adv); }
.greb-dict-card.pos-pron   { --gd-accent: var(--pos-pron); }
.greb-dict-card.pos-prep   { --gd-accent: var(--pos-prep); }
.greb-dict-card.pos-conj   { --gd-accent: var(--pos-conj); }
.greb-dict-card.pos-interj { --gd-accent: var(--pos-interj); }
.greb-dict-card.pos-art    { --gd-accent: var(--pos-art); }
.greb-dict-card.pos-num    { --gd-accent: var(--pos-num); }
.greb-dict-card.pos-part   { --gd-accent: var(--pos-part); }

/* The whole popup's border + shadow take the category colour. */
.greb-dict-card.pos-noun, .greb-dict-card.pos-verb, .greb-dict-card.pos-adj,
.greb-dict-card.pos-adv, .greb-dict-card.pos-pron, .greb-dict-card.pos-prep,
.greb-dict-card.pos-conj, .greb-dict-card.pos-interj, .greb-dict-card.pos-art,
.greb-dict-card.pos-num, .greb-dict-card.pos-part {
  border-color: var(--gd-accent);
  box-shadow: -4px 4px 0 var(--gd-accent);
}

/* A coloured rule under the header echoes the accent */
.greb-dict-card.pos-noun .gd-head, .greb-dict-card.pos-verb .gd-head,
.greb-dict-card.pos-adj .gd-head,  .greb-dict-card.pos-adv .gd-head,
.greb-dict-card.pos-pron .gd-head, .greb-dict-card.pos-prep .gd-head,
.greb-dict-card.pos-conj .gd-head {
  border-bottom: 2px solid var(--gd-accent);
}

/* ── Draggable popup ───────────────────────────────────────────── */
.greb-dict-card .gd-head { cursor: grab; user-select: none; position: relative; }
.greb-dict-card.gd-dragging { cursor: grabbing; }
.greb-dict-card.gd-dragging .gd-head { cursor: grabbing; }

/* Pin button (anchor the card / let it follow the word again) */
.greb-dict-card .gd-pin {
  display: inline-flex; align-items: center; gap: 4px; justify-content: center;
  height: 22px; margin-left: 6px; padding: 0 7px;
  border: 1.5px solid #8a6f3a; border-radius: 6px;
  background: transparent; color: #8a6f3a; cursor: pointer;
  vertical-align: middle; opacity: .55; line-height: 0;
}
.greb-dict-card .gd-pin:hover { opacity: .85; }
/* pinned state: chip filled with the card's accent colour */
.greb-dict-card.gd-pinned .gd-pin {
  opacity: 1; background: var(--gd-accent); color: #fff; border-color: var(--gd-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gd-accent) 25%, transparent);
}

/* ── Standalone POS legend panel (omnibar: `leyenda`) ──────────── */
.gd-legend-panel {
  position: fixed; left: 16px; bottom: 16px; z-index: 9500;
  background: #fffdf6; border: 3px solid #1a1a1a; border-radius: 11px;
  box-shadow: -5px 5px 0 rgba(26,26,26,.9);
  padding: 10px 12px 12px; min-width: 190px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.gd-legend-panel .gd-legend-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: #6b6256; font-weight: 700; margin-bottom: 8px;
}
.gd-legend-panel .gd-legend-x {
  border: 0; background: transparent; cursor: pointer;
  font-size: 16px; line-height: 1; color: #6b1414; padding: 0 2px;
}
.gd-legend-panel .gd-legend { display: flex; flex-direction: column; gap: 5px; border: 0; margin: 0; padding: 0; }
.gd-legend-panel .gd-leg { opacity: 1; color: #1a1a1a; font-size: 11px; }

/* ── Voice-dataset panel (omnibar: `dataset`) ──────────────────── */
.vp-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 9600;
  width: 380px; max-height: 70vh; display: flex; flex-direction: column;
  background: #fffdf6; border: 3px solid #1a1a1a; border-radius: 11px;
  box-shadow: -5px 5px 0 rgba(26,26,26,.9);
  font-family: "JetBrains Mono", ui-monospace, monospace; overflow: hidden;
}
.vp-panel .vp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: #efe6cd; border-bottom: 2px solid #1a1a1a;
}
.vp-panel .vp-title { font-weight: 700; font-size: 12px; letter-spacing: .04em; color: #1a1a1a; }
.vp-panel .vp-counts { font-size: 10px; color: #6b6256; margin-left: auto; }
.vp-panel .vp-x { border: 0; background: transparent; cursor: pointer; font-size: 17px; color: #6b1414; line-height: 1; }
.vp-panel .vp-tools { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid #e3d9bf; }
.vp-panel .vp-tools button {
  font: inherit; font-size: 10.5px; cursor: pointer;
  border: 1.5px solid #1a1a1a; border-radius: 6px; background: #fff; padding: 3px 8px;
}
.vp-panel .vp-tools .vp-export { margin-left: auto; background: #6b1414; color: #fff; border-color: #6b1414; }
.vp-panel .vp-tools button:hover { filter: brightness(.96); }
.vp-panel .vp-body { overflow-y: auto; padding: 4px 0; }
.vp-panel .vp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-bottom: 1px solid #f0e9d6; font-size: 11px;
}
.vp-panel .vp-row:hover { background: #faf4e2; }
.vp-panel .vp-play { border: 0; background: transparent; cursor: pointer; color: #6b1414; font-size: 12px; }
.vp-panel .vp-kind { color: #9a917f; font-size: 9.5px; min-width: 58px; }
.vp-panel .vp-text { flex: 1; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: "EB Garamond", serif; font-size: 13px; }
.vp-panel .vp-kb { color: #b0a890; font-size: 9.5px; }
.vp-panel .vp-empty { padding: 22px 16px; text-align: center; color: #8a7a64; font-size: 11px; line-height: 1.6; }
.vp-panel .vp-row { cursor: pointer; }
.vp-panel .vp-text:hover { text-decoration: underline; }

/* ── Generate-definitions progress bar (omnibar: generate-page-definitions) ── */
.gen-counter {
  position: fixed; left: 50%; bottom: 18px; top: auto; transform: translateX(-50%);
  z-index: 99999; width: min(440px, 92vw); cursor: pointer;
  background: #1a1a1a; color: #fbf6ea;
  border-radius: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.45);
  padding: 11px 14px 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  transition: opacity .6s ease; opacity: 1;
}
/* live current-word being generated */
.gen-counter .gen-word {
  margin-top: 8px; padding: 6px 10px; border-radius: 7px;
  background: rgba(246,215,122,.12); color: #f6d77a;
  font-family: "EB Garamond", serif; font-size: 17px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gen-counter.gen-expanded .gen-word { font-size: 30px; text-align: center; padding: 14px 10px; }
.gen-counter.gen-fade { opacity: 0; pointer-events: none; }
.gen-counter .gen-top { display: flex; align-items: center; gap: 8px; }
.gen-counter .gen-lbl { letter-spacing: .03em; opacity: .9; }
.gen-counter .gen-num { color: #f6d77a; font-weight: 700; margin-left: auto; }
.gen-counter .gen-rest { opacity: .6; font-size: 10.5px; min-width: 72px; text-align: right; }
.gen-counter .gen-done { color: #7bd88f; font-weight: 700; }
.gen-counter .gen-spin {
  width: 14px; height: 14px; border: 2px solid rgba(246,215,122,.3);
  border-top-color: #f6d77a; border-radius: 50%; flex: none;
  animation: gd-spin-rot 0.7s linear infinite;
}
.gen-counter .gen-x { border: 0; background: transparent; color: #b0a890; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 4px; }
.gen-counter .gen-x:hover { color: #fff; }
.gen-counter .gen-track { margin-top: 9px; height: 7px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.gen-counter .gen-fill {
  height: 100%; background: linear-gradient(90deg, #b08d2e, #f6d77a);
  border-radius: 999px; transition: width .25s ease;
}

/* pulse the paragraph you navigated to from the dataset panel */
.book-para.vp-flash { animation: vp-flash-kf 2.2s ease-out; border-radius: 4px; }
@keyframes vp-flash-kf {
  0%, 30% { background: rgba(246, 215, 122, .7); box-shadow: 0 0 0 6px rgba(246,215,122,.7); }
  100%    { background: transparent; box-shadow: 0 0 0 0 transparent; }
}