/* ==========================================================================
   MAQUILLAJE DEL EDITOR VISUAL (TinyMCE, campo "Contenido" de Crear/
   Editar Evento y Crear/Editar Noticia)
   Archivo: /css/backend-tinymce.css

   Este archivo se carga DOS VECES, por dos vías distintas, a propósito:
   1. wp_enqueue_style() normal (functions.php, "core_cargar_estilos_
      divididos") — llega a la página normal, donde vive el CHROME del
      editor (barra de herramientas, pestañas Visual/Texto, marco
      exterior) — todo fuera del <iframe>.
   2. El filtro "mce_css" (functions.php, "Inyecta el stylesheet de
      fuentes en el editor TinyMCE del frontend") — este SÍ llega DENTRO
      del <iframe> del editor, algo que un wp_enqueue_style() normal no
      consigue. Comprobado en vivo el 19/08/2026: ni add_editor_style()
      (el mecanismo "oficial" de WordPress para esto) ni el filtro
      "wp_editor_settings" tuvieron ningún efecto en el editor de ACF en
      frontend — este "mce_css" ya existente SÍ, así que es el único sitio
      real donde enganchar el CSS del interior del editor.
   Por eso las reglas de aquí abajo van en DOS GRUPOS con selectores muy
   distintos: el "chrome" exterior, prefijado con ".acf-campos-
   personalizados" (para no salirse de los formularios de este panel), y
   el CONTENIDO interior del iframe, prefijado con ".mce-content-body"
   (la clase que TinyMCE le pone a su propio <body> interno) — SIN ese
   prefijo, una regla de tipografía como "body{font-family:...}" se
   colaría en el <body> de TODA la página normal (la misma hoja también
   se carga ahí, vía wp_enqueue_style), cambiando la tipografía de la web
   entera por error.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. CHROME EXTERIOR (barra de herramientas, pestañas, marco) — vive en
      la página normal, fuera del iframe.
      19/08/2026, a petición expresa: "lo veo feo y anticuado" —
      maquillaje ligero sobre el editor clásico de WordPress (colores/
      bordes/radios del propio tema), no un rediseño ni un editor
      distinto (ver conversación: cambiar de editor no compensaba aquí).
   -------------------------------------------------------------------- */

/* Marco exterior: mismas esquinas redondeadas y borde que el resto de
   campos del formulario (Título, Sección...), en vez del borde cuadrado
   de fábrica de WordPress. */
.acf-campos-personalizados .wp-editor-wrap {
    border: 1px solid var(--scout-global-borde);
    border-radius: var(--radio-boton);
    overflow: hidden; /* recorta las esquinas de la barra/iframe al radio de arriba */
}

/* Barra de herramientas: fondo lavanda muy suave (el mismo tono "fondo"
   ya usado en el resto del sitio para resaltar zonas sin pesar) en vez
   del gris plano de fábrica, para que se note que es parte de esta web y
   no un panel de wp-admin genérico. */
.acf-campos-personalizados .wp-editor-tools,
.acf-campos-personalizados .mce-toolbar-grp,
.acf-campos-personalizados .mce-statusbar {
    background-color: var(--scout-global-fondo) !important;
    border-color: var(--scout-global-borde) !important;
}

/* Botones de la barra (negrita, cursiva, listas...): morado corporativo
   al pasar el ratón o al estar activos, en vez del azul genérico de
   wp-admin. */
.acf-campos-personalizados .mce-btn:hover,
.acf-campos-personalizados .mce-btn.mce-active,
.acf-campos-personalizados .mce-btn.mce-active:hover {
    background-color: color-mix(in srgb, var(--scout-global-base), white 80%) !important;
    border-color: var(--scout-global-base) !important;
}
.acf-campos-personalizados .mce-btn.mce-active i.mce-ico,
.acf-campos-personalizados .mce-btn.mce-active .mce-txt {
    color: var(--scout-global-base) !important;
}

/* Pestañas "Visual"/"Texto": la activa en morado corporativo, en vez del
   negrita+fondo blanco por defecto de WordPress. */
.acf-campos-personalizados .wp-editor-tabs .wp-switch-editor {
    border-radius: var(--radio-boton) var(--radio-boton) 0 0;
    color: var(--scout-global-texto);
}
/* Pestaña activa (Visual/Texto) = morado de marca, igual que el ítem
   activo del menú principal (20/08/2026, a petición expresa: "los
   botones que sean menús... morados... si la opción está seleccionada"
   — corrige el cambio a azul de un rato antes). */
.acf-campos-personalizados .wp-editor-tabs .switch-tmce.active,
.acf-campos-personalizados .wp-editor-tabs .switch-html.active {
    color: var(--scout-global-base) !important;
    border-bottom-color: #fff;
}

/* Botón "Añadir medios": mismo lenguaje "outline" que el resto de
   botones del sitio (scout-btn-accion/scout-btn-outline,
   paneles-scout-tabla.css) en vez del botón gris plano de fábrica.
   Verde (20/08/2026, rediseño completo, antes morado de marca) —
   "Añadir" es Crear/Guardar/Confirmar. */
.acf-campos-personalizados .wp-media-buttons .button.insert-media {
    border-color: var(--color-accion-verde) !important;
    color: var(--color-accion-verde) !important;
    border-radius: var(--radio-boton) !important;
    box-shadow: none !important;
}
.acf-campos-personalizados .wp-media-buttons .button.insert-media:hover {
    background-color: #f0fdf4 !important;
}
.acf-campos-personalizados .wp-media-buttons .button.insert-media .wp-media-buttons-icon:before {
    color: var(--color-accion-verde);
}

/* --------------------------------------------------------------------
   2. CONTENIDO DEL IFRAME (".mce-content-body", el <body> real donde
      escribes) — 19/08/2026, a petición expresa: "lo que editas cambia
      bastante al verlo". Valores calcados de la propia web en vivo
      (".wp-block-post-content" de una ficha real de evento, medido con
      las DevTools, no adivinados) — el objetivo es que el editor imite
      la web, nada más, no un diseño nuevo. No se usan las variables CSS
      del tema hijo (var(--scout-global-*)) aquí dentro a propósito: el
      <head> del iframe NO carga style.css (solo esta hoja), así que esas
      variables no existirían — se escriben los valores ya resueltos. */
@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 200 800;
    font-display: fallback;
    /* Fuente local del tema PADRE (Twenty Twenty-Five), no de este tema
       hijo — si algún día cambia el tema padre, esta ruta dejaría de
       existir y el editor caería en el "sans-serif" de reserva sin
       romperse. */
    src: url('../../twentytwentyfive/assets/fonts/manrope/Manrope-VariableFont_wght.woff2') format('woff2');
}

.mce-content-body {
    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: rgb(20, 7, 31);
}

.mce-content-body p {
    margin: 0 0 1.4em;
}

.mce-content-body h1,
.mce-content-body h2,
.mce-content-body h3,
.mce-content-body h4,
.mce-content-body h5,
.mce-content-body h6 {
    font-family: Manrope, sans-serif;
    font-weight: 700;
    color: rgb(20, 7, 31);
    line-height: 1.3;
}

.mce-content-body a {
    color: #622599; /* --scout-global-base del tema hijo (style.css) */
}

.mce-content-body strong,
.mce-content-body b {
    font-weight: 700;
}

.mce-content-body blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 3px solid #622599;
    color: rgb(20, 7, 31);
    font-style: italic;
}
