/* Toolbar del editor Nebrija — usa tokens de frontend/src/styles.css.
 * Reglas: 03-frontend-spa (tokens, no magic numbers), 09-hispanidad
 * (texto en CSS solo identificadores ASCII), 10-modularidad-srp.
 */

.ntb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1, 4px);
  padding: var(--s-2, 8px) var(--s-4, 16px);
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--border, #e5e7eb);
  font-family: inherit;
}

.editor-toolbar-host {
  /* Global toolbar row between #topbar and #layout in the real editor. */
  flex-shrink: 0;
}
.editor-toolbar-host:empty {
  display: none;
}

.ntb__group {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1, 4px);
}

.ntb__sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border-strong, #d4d3ce);
  margin: 0 var(--s-2, 8px);
}

.ntb__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2, #374151);
  padding: 0 var(--s-2, 8px);
  min-width: 34px;
  height: 34px;
  border-radius: var(--r-md, 8px);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--t-fast, 120ms) ease,
    color var(--t-fast, 120ms) ease,
    border-color var(--t-fast, 120ms) ease,
    box-shadow var(--t-fast, 120ms) ease;
}

.ntb__btn:hover {
  background: var(--surface-2, #f7f8fa);
  color: var(--text, #0f1419);
}

.ntb__btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(124, 58, 237, 0.18));
}

.ntb__btn.is-active,
.ntb__btn[aria-pressed="true"] {
  background: var(--accent-soft, #f3e8ff);
  color: var(--accent-strong, #6d28d9);
  font-weight: 600;
}

/* Popover de la tabla */
.ntb__popover {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e6e5e1);
  border-radius: var(--r-md, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: var(--s-1, 4px);
  min-width: 220px;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.ntb__popover-item {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  padding: var(--s-2, 8px) var(--s-3, 12px);
  border-radius: var(--r-sm, 4px);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--text, #1a1a1a);
}

.ntb__popover-item:hover {
  background: var(--surface-3, #f3f3f1);
}

.ntb__popover-item:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * Iconos SVG estilo Word
 * --------------------------------------------------------------------- */

.ntb__btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 var(--s-2, 8px);
}

.ntb__btn--icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

/* Etiqueta textual oculta visualmente pero visible para lectores de
 * pantalla. Mantiene la Hispanidad accesible sin recargar la barra. */
.ntb__btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Caso especial: las letras N / K / S del grupo inline siguen
 * convención Word ES. Mostramos la letra junto al SVG para que el
 * editor las reconozca inmediatamente. */
.ntb__btn[data-id="bold"] .ntb__btn-label,
.ntb__btn[data-id="italic"] .ntb__btn-label,
.ntb__btn[data-id="underline"] .ntb__btn-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0 0 0 4px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  font-weight: 700;
  font-size: 12px;
}
.ntb__btn[data-id="bold"] svg,
.ntb__btn[data-id="italic"] svg,
.ntb__btn[data-id="underline"] svg {
  display: none;
}

/* -----------------------------------------------------------------------
 * Subtítulo Poiema — estilo visual del párrafo marcado
 * --------------------------------------------------------------------- */
.ProseMirror p[data-nebrija-style="subtitle"] {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--text, #1a1a1a);
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  letter-spacing: 0.01em;
}

/* -----------------------------------------------------------------------
 * Panel lateral Buscar / reemplazar
 * --------------------------------------------------------------------- */

.nebrija-search {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: var(--surface, #ffffff);
  border-left: 1px solid var(--border, #e6e5e1);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
  padding: var(--s-4, 16px);
  display: none;
  flex-direction: column;
  gap: var(--s-3, 12px);
  z-index: 200;
  font-family: inherit;
  color: var(--text, #1a1a1a);
}

.nebrija-search.is-open {
  display: flex;
}

.nebrija-search__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s-2, 8px);
  border-bottom: 1px solid var(--border, #e6e5e1);
}

.nebrija-search__header h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

.nebrija-search__close {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-muted, #6b7280);
  padding: 4px 8px;
  border-radius: var(--r-sm, 4px);
}

.nebrija-search__close:hover {
  background: var(--surface-3, #f3f3f1);
  color: var(--text, #1a1a1a);
}

.nebrija-search__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nebrija-search__field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
}

.nebrija-search__field input {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e6e5e1);
  border-radius: var(--r-sm, 4px);
  background: var(--surface, #ffffff);
  color: var(--text, #1a1a1a);
}

.nebrija-search__field input:focus {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 1px;
  border-color: var(--accent, #2563eb);
}

.nebrija-search__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.nebrija-search__options label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text, #1a1a1a);
}

.nebrija-search__count {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  padding: 4px 0;
  font-style: italic;
}

.nebrija-search__actions {
  display: flex;
  gap: var(--s-2, 8px);
}

.nebrija-search__actions button {
  flex: 1;
  appearance: none;
  border: 1px solid var(--border, #e6e5e1);
  background: var(--surface, #ffffff);
  color: var(--text, #1a1a1a);
  padding: 8px 10px;
  border-radius: var(--r-sm, 4px);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.nebrija-search__actions button:not(:disabled):hover {
  background: var(--surface-3, #f3f3f1);
}

.nebrija-search__actions button.is-primary {
  background: var(--accent, #2563eb);
  color: #ffffff;
  border-color: var(--accent, #2563eb);
}

.nebrija-search__actions button.is-primary:not(:disabled):hover {
  background: var(--accent-strong, #1d4ed8);
}


.nebrija-search__actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nebrija-search__actions button.is-confirming {
  background: #7c2d12;
  border-color: #7c2d12;
  color: #ffffff;
}

.nebrija-search__actions button.is-secondary {
  background: var(--accent-soft, #dbeafe);
  color: var(--accent-strong, #1d4ed8);
  border-color: var(--accent-soft, #dbeafe);
}

/* Resaltado de coincidencias inyectado por prosemirror-search. */
.ProseMirror-search-match {
  background: #fff3a0;
  border-radius: 2px;
}

.ProseMirror-active-search-match {
  background: #ffb347;
  outline: 2px solid #d97706;
  outline-offset: 1px;
  border-radius: 2px;
}