/**
 * Archivo: assets/css/shared/wysiwyg.css
 * Sistema: Allage — Estilos globales para editores TinyMCE / Quicktags
 * Versión: 2.1.0
 * Fecha: 07 Abril 2026
 *
 * Se carga en TODAS las páginas del frontend donde pueda aparecer
 * un editor WordPress (TinyMCE visual + Quicktags HTML).
 * Requiere: shared/variables.css (variables --ltn-*)
 *
 * Variables utilizadas:
 *   --ltn-green-primary  #506727   → activo, fondo botón principal
 *   --ltn-green-dark     #3e5120   → color iconos/texto (legibilidad)
 *   --ltn-green-light    #BACD70   → fondos toolbar, bordes
 *   --ltn-shadow-sm/md             → sombras corporativas
 *   --ltn-transition               → all 0.2s ease
 *   --ltn-border-radius            → 8px
 */

/* ===========================================================
   MARCO EXTERIOR — sin borde ni sombra
   =========================================================== */

.wp-editor-wrap {
    border: none !important;
    box-shadow: none !important;
}

/* ===========================================================
   MARCOS INTERNOS — borde verde claro
   =========================================================== */

.wp-editor-container,
.mce-edit-area,
.mce-tinymce,
.mce-container,
.mce-container-body {
    border-color: var(--ltn-green-light) !important;
}

/* ===========================================================
   FONDO TOOLBAR
   =========================================================== */

.mce-toolbar-grp,
.mce-toolbar {
    background-color: var(--ltn-green-light) !important;
    border-color: var(--ltn-green-light) !important;
}

/* ===========================================================
   BOTONES TOOLBAR
   =========================================================== */

/* Eliminar marco azul — especificidad alta cubre skin TinyMCE + navegador */
.wp-editor-wrap .mce-toolbar .mce-btn,
.wp-editor-wrap .mce-toolbar .mce-btn:hover,
.wp-editor-wrap .mce-toolbar .mce-btn:focus,
.wp-editor-wrap .mce-toolbar .mce-btn button,
.wp-editor-wrap .mce-toolbar .mce-btn button:hover,
.wp-editor-wrap .mce-toolbar .mce-btn button:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

.mce-toolbar .mce-btn {
    border-radius: var(--ltn-border-radius) !important;
    background: white !important;
    border: 1px solid var(--ltn-green-light) !important;
    transition: var(--ltn-transition) !important;
    overflow: hidden !important;
}

.mce-toolbar .mce-btn button {
    border-radius: var(--ltn-border-radius) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.mce-toolbar .mce-btn button:focus,
.mce-toolbar .mce-btn button:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.mce-toolbar .mce-btn button,
.mce-toolbar .mce-btn i,
.mce-toolbar .mce-ico {
    color: var(--ltn-green-dark) !important;
}

.mce-toolbar .mce-btn:hover,
.mce-toolbar .mce-btn:focus {
    background: var(--ltn-green-primary) !important;
    border-color: var(--ltn-green-primary) !important;
}

.mce-toolbar .mce-btn:hover button,
.mce-toolbar .mce-btn:hover i,
.mce-toolbar .mce-btn:hover .mce-ico,
.mce-toolbar .mce-btn:focus button,
.mce-toolbar .mce-btn:focus .mce-ico {
    color: white !important;
}

.mce-toolbar .mce-btn.mce-active {
    background: var(--ltn-green-primary) !important;
    border-color: var(--ltn-green-primary) !important;
}

.mce-toolbar .mce-btn.mce-active button,
.mce-toolbar .mce-btn.mce-active i,
.mce-toolbar .mce-btn.mce-active .mce-ico {
    color: white !important;
}

/* ===========================================================
   PESTAÑAS VISUAL / TEXTO
   =========================================================== */

/* Pestaña inactiva */
.wp-editor-tabs .wp-switch-editor {
    background: white !important;
    border: 1px solid var(--ltn-green-light) !important;
    color: var(--ltn-green-dark) !important;
    font-weight: 500 !important;
    transition: var(--ltn-transition) !important;
}

.wp-editor-tabs .wp-switch-editor:hover {
    background: var(--ltn-green-primary) !important;
    border-color: var(--ltn-green-primary) !important;
    color: white !important;
}

/* Pestaña activa — selectores canónicos WordPress + fallback .active */
.tmce-active .switch-tmce,
.html-active .switch-html,
.wp-editor-tabs .wp-switch-editor.active {
    background: var(--ltn-green-light) !important;
    border-color: var(--ltn-green-light) !important;
    color: var(--ltn-green-dark) !important;
    font-weight: 600 !important;
}

/* ===========================================================
   BOTÓN AÑADIR MEDIOS
   =========================================================== */

.wp-editor-wrap .wp-media-buttons .button,
.wp-editor-wrap .wp-media-buttons .insert-media {
    background-color: var(--ltn-green-primary) !important;
    color: white !important;
    border-color: var(--ltn-green-primary) !important;
    border-radius: var(--ltn-border-radius) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: var(--ltn-transition) !important;
}

.wp-editor-wrap .wp-media-buttons .button:hover,
.wp-editor-wrap .wp-media-buttons .insert-media:hover {
    background-color: var(--ltn-green-light) !important;
    border-color: var(--ltn-green-light) !important;
    color: white !important;
}

/* ===========================================================
   ÁREA DE ESCRITURA
   =========================================================== */

/* Modo Código — textarea directamente en el DOM */
.wp-editor-area {
    background-color: var(--ltn-gray-100, #f3f4f6) !important;
    color: var(--ltn-green-primary) !important;
}

/* Modo Visual — fondo del contenedor del iframe */
.mce-edit-area {
    background-color: var(--ltn-gray-100, #f3f4f6) !important;
}

/* ===========================================================
   QUICKTAGS — MODO HTML
   =========================================================== */

/* Barra toolbar modo Código */
.quicktags-toolbar {
    background-color: var(--ltn-green-light) !important;
    border-color: var(--ltn-green-light) !important;
    padding: 4px !important;
}

.quicktags-toolbar input.ed_button {
    background: white !important;
    border: 1px solid var(--ltn-green-light) !important;
    color: var(--ltn-green-dark) !important;
    border-radius: var(--ltn-border-radius) !important;
    font-weight: 500 !important;
    transition: var(--ltn-transition) !important;
}

.quicktags-toolbar input.ed_button:hover {
    background: var(--ltn-green-primary) !important;
    border-color: var(--ltn-green-primary) !important;
    color: white !important;
}