/* ============================================================================
 * ARCHIVO:        assets/css/editor.css
 * DESCRIPCIÓN:    Estilos del editor WYSIWYG (TinyMCE 7).
 *                 El título del documento vive ahora DENTRO de la hoja del
 *                 editor (es un <h1.doc-titulo> dentro del contenido), así
 *                 que ya no hay cabecera externa. El indicador "Guardado"
 *                 flota en la esquina superior derecha sobre la toolbar.
 * VERSIÓN:        2.0.6  (Fase 9)
 * CREADO:         2026-05-23
 * ACTUALIZADO:    2026-05-31 (fix: chip de estado no intercepta clics de la toolbar)
 * PROYECTO:       Mi Archivador
 * ============================================================================ */

/* ============ CONTENEDOR EXTERIOR ============ */
.editor-contenedor {
    display: flex;
    flex-direction: column;
    /* Altura absoluta: el padre .vista-cuerpo es flex:1 del .panel-vista,
       y le aplicamos min-height:0 para que nunca pueda colapsar. */
    height: 100%;
    min-height: 0;
    background: var(--fondo-suave);
    overflow: hidden;
    position: relative;
}

/* ============ ESTADO DE GUARDADO (flotante, esquina superior derecha) ============ */
.editor-estado {
    position: absolute;
    top: 9px;
    right: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--tinta-tenue);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tarjeta);
    border: 1px solid var(--tarjeta-borde);
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 200ms, background 200ms, color 200ms;
    opacity: 0.85;
}
/* Ningún hijo del chip debe capturar el ratón (evita robar clics a la toolbar). */
.editor-estado * { pointer-events: none; }

.editor-estado.guardando {
    color: #b07d00;
    background: rgba(255, 200, 60, 0.14);
    border-color: rgba(255, 200, 60, 0.42);
}

.editor-estado.guardado {
    color: #2f7a3b;
    background: rgba(64, 180, 90, 0.12);
    border-color: rgba(64, 180, 90, 0.38);
}

.editor-estado.error {
    color: #c0392b;
    background: rgba(220, 60, 60, 0.12);
    border-color: rgba(220, 60, 60, 0.38);
}

/* ============ TINYMCE ============ */
.editor-tinymce { display: none; }

.tox.tox-tinymce {
    /* Importante: flex:1 + min-height:0 evita el hueco que aparece al
       cambiar de tema (la altura calculada por TinyMCE se desincronizaba
       con el contenedor padre). */
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'Public Sans', system-ui, sans-serif !important;
    background: transparent !important;
}

/* Wrapper interno: que el área de edición rellene siempre el alto disponible */
.tox.tox-tinymce > .tox-editor-container,
.tox .tox-edit-area,
.tox .tox-edit-area iframe {
    min-height: 0 !important;
}

/* ===========================================================
   MODO LECTURA
   Cuando .editor-contenedor tiene la clase .modo-lectura ocultamos
   la barra de menús, la barra de herramientas y la barra de estado
   de TinyMCE, dejando solo la hoja de contenido. El editor además se
   pone en 'readonly' desde JS (no editable). Así la página gana
   espacio vertical y se usa como lector.
   =========================================================== */
.editor-contenedor.modo-lectura .tox .tox-editor-header,
.editor-contenedor.modo-lectura .tox .tox-menubar,
.editor-contenedor.modo-lectura .tox .tox-toolbar-overlord,
.editor-contenedor.modo-lectura .tox .tox-toolbar__primary,
.editor-contenedor.modo-lectura .tox .tox-statusbar,
.editor-contenedor.modo-lectura .tox .tox-anchorbar {
    display: none !important;
    height: 0 !important;
    border: 0 !important;
}

/* En lectura ocultamos el chip "Guardado" (no hay edición en curso). */
.editor-contenedor.modo-lectura .editor-estado {
    display: none !important;
}

/* ===========================================================
   TEMA OSCURO DE LA TOOLBAR (skin externa)
   Como ya no recreamos el editor al cambiar tema, sobreescribimos
   los colores de la skin "oxide" con CSS controlado por
   [data-tema="oscuro"] en <html>. Override exhaustivo: incluye los
   wrappers internos de cada botón (icon-wrap, label, chevron),
   los bespoke selects (Título, Fuente, Tamaño) y los popovers.
   =========================================================== */
[data-tema="oscuro"] .tox.tox-tinymce {
    background: var(--fondo-suave) !important;
}

/* Barras y contenedores principales */
[data-tema="oscuro"] .tox .tox-editor-header,
[data-tema="oscuro"] .tox .tox-menubar,
[data-tema="oscuro"] .tox .tox-toolbar,
[data-tema="oscuro"] .tox .tox-toolbar__primary,
[data-tema="oscuro"] .tox .tox-toolbar__overflow,
[data-tema="oscuro"] .tox .tox-toolbar-overlord,
[data-tema="oscuro"] .tox .tox-anchorbar,
[data-tema="oscuro"] .tox .tox-promotion {
    background: var(--tarjeta) !important;
    color: var(--tinta) !important;
    border-color: var(--tarjeta-borde) !important;
}

/* Separadores entre grupos */
[data-tema="oscuro"] .tox .tox-toolbar__group {
    border-color: var(--tarjeta-borde) !important;
}
[data-tema="oscuro"] .tox .tox-toolbar__group:not(:last-of-type) {
    border-right-color: var(--tarjeta-borde) !important;
}

/* Botones del toolbar: TODOS los estados, incluido el fondo base */
[data-tema="oscuro"] .tox .tox-tbtn,
[data-tema="oscuro"] .tox .tox-tbtn--bespoke,
[data-tema="oscuro"] .tox .tox-split-button,
[data-tema="oscuro"] .tox .tox-mbtn {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--tinta) !important;
    border-color: transparent !important;
}
[data-tema="oscuro"] .tox .tox-tbtn:hover,
[data-tema="oscuro"] .tox .tox-tbtn:focus,
[data-tema="oscuro"] .tox .tox-tbtn--enabled,
[data-tema="oscuro"] .tox .tox-tbtn--enabled:hover,
[data-tema="oscuro"] .tox .tox-tbtn--active,
[data-tema="oscuro"] .tox .tox-split-button:hover,
[data-tema="oscuro"] .tox .tox-mbtn:hover,
[data-tema="oscuro"] .tox .tox-mbtn--active {
    background-color: var(--fondo-hover) !important;
    color: var(--tinta) !important;
}

/* Iconos SVG dentro de los botones */
[data-tema="oscuro"] .tox .tox-tbtn svg,
[data-tema="oscuro"] .tox .tox-mbtn svg,
[data-tema="oscuro"] .tox .tox-icon svg,
[data-tema="oscuro"] .tox .tox-tbtn__icon-wrap svg {
    fill: var(--tinta) !important;
    color: var(--tinta) !important;
}

/* Etiquetas/textos dentro de botones (p.ej. "Wiki", "Título 1", "Fraunces") */
[data-tema="oscuro"] .tox .tox-tbtn__select-label,
[data-tema="oscuro"] .tox .tox-tbtn__select-chevron,
[data-tema="oscuro"] .tox .tox-tbtn__select-chevron svg,
[data-tema="oscuro"] .tox .tox-tbtn__icon-wrap,
[data-tema="oscuro"] .tox .tox-tbtn__icon-wrap svg,
[data-tema="oscuro"] .tox .tox-mbtn__select-label {
    color: var(--tinta) !important;
    fill: var(--tinta) !important;
    background: transparent !important;
}

/* Botones "bespoke" (selectores Título / Fuente / Tamaño) — son los que
   se veían en blanco con texto fantasma en la captura del usuario. */
[data-tema="oscuro"] .tox .tox-tbtn--bespoke {
    background: var(--fondo-suave) !important;
    border: 1px solid var(--tarjeta-borde) !important;
    color: var(--tinta) !important;
}
[data-tema="oscuro"] .tox .tox-tbtn--bespoke:hover {
    background: var(--fondo-hover) !important;
}
[data-tema="oscuro"] .tox .tox-tbtn--bespoke .tox-tbtn__select-label {
    color: var(--tinta) !important;
}

/* Statusbar */
[data-tema="oscuro"] .tox .tox-statusbar {
    background: var(--fondo-suave) !important;
    color: var(--tinta-tenue) !important;
    border-top-color: var(--tarjeta-borde) !important;
}
[data-tema="oscuro"] .tox .tox-statusbar a,
[data-tema="oscuro"] .tox .tox-statusbar__path-item,
[data-tema="oscuro"] .tox .tox-statusbar__wordcount {
    color: var(--tinta-tenue) !important;
}

/* Menús desplegables, paletas de color, diálogos modales y popovers */
[data-tema="oscuro"] .tox .tox-menu,
[data-tema="oscuro"] .tox .tox-collection,
[data-tema="oscuro"] .tox .tox-collection--list,
[data-tema="oscuro"] .tox .tox-collection--toolbar,
[data-tema="oscuro"] .tox .tox-collection__item,
[data-tema="oscuro"] .tox .tox-pop,
[data-tema="oscuro"] .tox .tox-pop__dialog,
[data-tema="oscuro"] .tox .tox-swatches-menu,
[data-tema="oscuro"] .tox .tox-dialog,
[data-tema="oscuro"] .tox .tox-dialog__header,
[data-tema="oscuro"] .tox .tox-dialog__body,
[data-tema="oscuro"] .tox .tox-dialog__footer,
[data-tema="oscuro"] .tox .tox-dialog__body-content,
[data-tema="oscuro"] .tox .tox-dialog-wrap__backdrop {
    background: var(--tarjeta) !important;
    color: var(--tinta) !important;
    border-color: var(--tarjeta-borde) !important;
}
[data-tema="oscuro"] .tox .tox-dialog-wrap__backdrop {
    background: rgba(0, 0, 0, 0.55) !important;
}
[data-tema="oscuro"] .tox .tox-collection__item--active,
[data-tema="oscuro"] .tox .tox-collection__item--state-enabled,
[data-tema="oscuro"] .tox .tox-collection__item:hover {
    background: var(--fondo-hover) !important;
    color: var(--tinta) !important;
}
[data-tema="oscuro"] .tox .tox-collection__item-label,
[data-tema="oscuro"] .tox .tox-collection__item-icon svg {
    color: var(--tinta) !important;
    fill: var(--tinta) !important;
}

/* Inputs dentro de diálogos (subida de imagen, link, etc.) */
[data-tema="oscuro"] .tox .tox-textfield,
[data-tema="oscuro"] .tox .tox-textarea,
[data-tema="oscuro"] .tox .tox-listboxfield .tox-listbox--select,
[data-tema="oscuro"] .tox .tox-selectfield select,
[data-tema="oscuro"] .tox input[type="text"],
[data-tema="oscuro"] .tox input[type="url"],
[data-tema="oscuro"] .tox input[type="number"],
[data-tema="oscuro"] .tox textarea {
    background: var(--fondo-suave) !important;
    color: var(--tinta) !important;
    border-color: var(--tarjeta-borde) !important;
}
[data-tema="oscuro"] .tox .tox-label,
[data-tema="oscuro"] .tox .tox-form__group > .tox-label,
[data-tema="oscuro"] .tox .tox-dialog__title {
    color: var(--tinta) !important;
}

/* Botones de los diálogos */
[data-tema="oscuro"] .tox .tox-button--secondary,
[data-tema="oscuro"] .tox .tox-button--naked {
    background: var(--fondo-suave) !important;
    color: var(--tinta) !important;
    border-color: var(--tarjeta-borde) !important;
}
[data-tema="oscuro"] .tox .tox-button--secondary:hover,
[data-tema="oscuro"] .tox .tox-button--naked:hover {
    background: var(--fondo-hover) !important;
}

/* Notificaciones de TinyMCE */
[data-tema="oscuro"] .tox .tox-notification {
    background: var(--tarjeta) !important;
    color: var(--tinta) !important;
    border-color: var(--tarjeta-borde) !important;
}

.tox .tox-editor-header {
    border-bottom: 1px solid var(--tarjeta-borde) !important;
    box-shadow: none !important;
}

.tox .tox-statusbar {
    border-top: 1px solid var(--tarjeta-borde) !important;
    background: var(--fondo-suave) !important;
}

/* ============ PANEL DE BACKLINKS ============ */
.backlinks-panel {
    font-family: 'Public Sans', system-ui, sans-serif;
    color: var(--tinta);
}

/* ============ ENLACES WIKI (solo aplican fuera del iframe) ============ */
.enlace-wiki {
    color: #7c4dff;
    border-bottom: 1px dashed currentColor;
    text-decoration: none;
    cursor: pointer;
}
.enlace-wiki:hover { background: rgba(124, 77, 255, 0.08); }
[data-tema="oscuro"] .enlace-wiki { color: #b39bff; }

/* ============ IMPRESIÓN ============ */
@media print {
    body * { visibility: hidden; }
    .editor-contenedor, .editor-contenedor * { visibility: visible; }
    .editor-estado { display: none; }
    .tox-editor-header { display: none !important; }
    .tox-statusbar { display: none !important; }
    .editor-contenedor { position: absolute; left: 0; top: 0; width: 100%; }
}