/* ================================================================
   bug-fixes-v2.css
   Carga al final. Arregla bugs reales sin tocar el sistema actual:
   - Database: cuadrado/overlay fantasma al seleccionar.
   - Quote: doble border-left por colisión notion.css + liquid-glass-depth-v5.
   - Inline equations renderizadas dentro de párrafos.
   - Equation block más limpio.
   - Drag-select no debería marcar databases (overlay raro).
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   DATABASE — selección limpia, sin cuadrado fantasma
   ────────────────────────────────────────────────────────────── */

/* Si la base de datos cae dentro de una drag-selection, NO mostrar
   el outline azul de .block.selected (su tabla ya tiene su propio borde) */
#editor-blocks .block.block-database.selected,
#editor-blocks .block.block-database.selected > .block-row,
#editor-blocks .block.block-database.selected > .block-row > .block-content {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

#editor-blocks .block.block-database.selected > .block-row > .block-content::before,
#editor-blocks .block.block-database.selected > .block-row > .block-content::after {
  content: none !important;
  display: none !important;
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* La table de DB se queda con UN solo borde (limpio), no doble */
.block-database .db-wrap {
  border-radius: 8px;
  background: transparent;
}

/* Sin overlay/handle de resize sobre la DB (las DBs no son resizables como widgets) */
.block.block-database .block-resize-handle,
.block.block-database .block-resize-handle-v,
.block.block-database .block-resize-handle-c {
  display: none !important;
}

/* Pseudo-element fantasma de v7.css aniquilado dentro de DBs */
.block.block-database::before,
.block.block-database::after,
.block.block-database > .block-row::before,
.block.block-database > .block-row::after {
  content: none !important;
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   QUOTE — un solo border-left, no doble
   notion.css:549 lo aplica a .block-quote .block-content (border-left 3px).
   liquid-glass-depth-v5.css:94 lo APLICABA OTRA VEZ a .block-row con !important.
   Resultado: dos barras laterales superpuestas con backgrounds distintos.
   ────────────────────────────────────────────────────────────── */
html[data-visual="liquid-glass"] .editor-blocks .block.block-quote .block-row {
  border-left: 0 !important;
  padding-left: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Solo el .block-content lleva la barra (single source of truth) */
.editor-blocks .block.block-quote .block-content,
html[data-visual="liquid-glass"] .editor-blocks .block.block-quote .block-content {
  border-left: 3px solid var(--quote-border, var(--text-2)) !important;
  padding: 4px 0 4px 16px !important;
  font-size: 16px !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--text) 4%, transparent),
      transparent 50%) !important;
  border-radius: 0 6px 6px 0 !important;
  font-style: italic;
  color: var(--text);
}

/* Quote con resize accidentado: anular handles fantasma */
.block.block-quote .block-resize-handle,
.block.block-quote .block-resize-handle-v,
.block.block-quote .block-resize-handle-c {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   INLINE EQUATIONS
   Cada span.inline-equation se renderiza con KaTeX desde editor.js.
   Aquí solo definimos su look.
   ────────────────────────────────────────────────────────────── */
.inline-equation {
  display: inline-block;
  vertical-align: middle;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  cursor: pointer;
  font-size: 0.96em;
  transition: background 140ms ease, transform 140ms ease;
}

.inline-equation:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  transform: translateY(-1px);
}

.inline-equation.editing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  outline: 2px solid color-mix(in srgb, var(--text) 35%, transparent);
}

.inline-equation .ie-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  min-width: 80px;
  width: auto;
}

/* Block equation cleanup (math) */
.block-math .math-display,
.block.block-math .math-display {
  padding: 14px 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  text-align: center;
  cursor: pointer;
  transition: background 140ms ease;
}

.block-math .math-display:hover {
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.block-math.editing .math-display { display: none; }
.block-math .math-edit {
  display: none;
  padding: 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  white-space: pre-wrap;
  outline: none;
  min-height: 32px;
}
.block-math.editing .math-edit { display: block; }

/* Error de LaTeX */
.math-display .katex-error,
.inline-equation .katex-error {
  color: var(--danger, #d33);
  font-style: italic;
  font-size: 13px;
}

/* ──────────────────────────────────────────────────────────────
   AI Graph: viewport limpio en resize (no aparece nada cortado)
   ────────────────────────────────────────────────────────────── */
.aig-canvas {
  contain: layout paint;
  overflow: hidden;
}

.aig-stage {
  transform-origin: 0 0;
  will-change: transform;
}

/* ──────────────────────────────────────────────────────────────
   Whiteboard: panel propiedades visible y estable
   ────────────────────────────────────────────────────────────── */
.wb-props {
  contain: layout paint;
}
.wb-props-row { gap: 8px; }
.wb-props-sel {
  flex: 1;
  min-width: 60px;
}