/* ==========================================================================
   Flora · Editor WYSIWYG  (port desde EduSistema)
   Estilos del componente <x-flora::editor>. Usa las variables --fl-* de Flora.
   ========================================================================== */

.fl-editor {
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-md);
    background: var(--fl-fondo);
    overflow: hidden;
    transition: border-color var(--fl-transicion-rapida), box-shadow var(--fl-transicion-rapida);
}

.fl-editor:focus-within {
    border-color: var(--fl-acento);
    box-shadow: 0 0 0 3px var(--fl-acento-suave, color-mix(in srgb, var(--fl-acento) 18%, transparent));
}

.fl-campo--error .fl-editor {
    border-color: var(--fl-error);
}

/* ---------- Barra de herramientas ---------- */
.fl-editor-barra {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fl-sp-1);
    padding: var(--fl-sp-1-5) var(--fl-sp-2);
    background: var(--fl-fondo-sutil);
    border-bottom: 1px solid var(--fl-borde);
}

.fl-editor-grupo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.fl-editor-separador {
    width: 1px;
    height: 20px;
    background: var(--fl-borde);
    margin: 0 var(--fl-sp-1);
}

.fl-editor-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--fl-texto-suave);
    padding: 6px 8px;
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fl-r-sm);
    cursor: pointer;
    font-size: var(--fl-texto-sm);
    line-height: 1;
    transition: background var(--fl-transicion-rapida), color var(--fl-transicion-rapida);
}

.fl-editor-btn:hover {
    background: var(--fl-fondo);
    color: var(--fl-texto-fuerte);
    border-color: var(--fl-borde);
}

.fl-editor-btn:active {
    background: var(--fl-borde);
}

.fl-editor-btn:focus-visible {
    outline: 2px solid var(--fl-acento);
    outline-offset: 1px;
}

/* Estado activo (cuando el cursor está sobre texto con ese formato) */
.fl-editor-btn--activo {
    background: var(--fl-destaque-fondo);
    color: var(--fl-destaque-texto);
    border-color: var(--fl-destaque-fondo);
}

.fl-editor-btn--activo:hover {
    background: var(--fl-destaque-fondo);
    color: var(--fl-destaque-texto);
}

.fl-editor-btn .fl-icono {
    width: 16px;
    height: 16px;
}

.fl-editor-btn-texto {
    font-weight: 600;
    font-size: 0.85rem;
}

.fl-editor-btn-texto sub {
    font-size: 0.65em;
}

/* ---------- Área editable ---------- */
.fl-editor-area {
    padding: var(--fl-sp-3) var(--fl-sp-4);
    min-height: 240px;
    max-height: 70vh;
    overflow-y: auto;
    font-family: var(--fl-fuente-sans);
    font-size: var(--fl-texto-md);
    line-height: 1.6;
    color: var(--fl-texto);
    outline: none;
}

.fl-editor-area--grande {
    min-height: 400px;
}

.fl-editor-area:empty::before {
    content: attr(data-placeholder);
    color: var(--fl-texto-tenue);
    pointer-events: none;
}

/* Reset de tipografía dentro del editor (para que se vea consistente) */
.fl-editor-area > *:first-child { margin-top: 0; }
.fl-editor-area > *:last-child { margin-bottom: 0; }

.fl-editor-area p {
    margin: 0 0 var(--fl-sp-3) 0;
}

.fl-editor-area h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--fl-texto-fuerte);
    margin: var(--fl-sp-4) 0 var(--fl-sp-2) 0;
    line-height: 1.3;
}

.fl-editor-area h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fl-texto-fuerte);
    margin: var(--fl-sp-3) 0 var(--fl-sp-2) 0;
    line-height: 1.3;
}

.fl-editor-area ul,
.fl-editor-area ol {
    margin: 0 0 var(--fl-sp-3) 0;
    padding-left: var(--fl-sp-5);
}

.fl-editor-area li {
    margin-bottom: var(--fl-sp-1);
}

.fl-editor-area a {
    color: var(--fl-acento);
    text-decoration: underline;
}

.fl-editor-area strong { font-weight: 700; color: var(--fl-texto-fuerte); }
.fl-editor-area em { font-style: italic; }
.fl-editor-area u { text-decoration: underline; }

.fl-editor-area blockquote {
    margin: 0 0 var(--fl-sp-3) 0;
    padding-left: var(--fl-sp-3);
    border-left: 3px solid var(--fl-acento);
    color: var(--fl-texto-suave);
    font-style: italic;
}

/* Imprimir: ocultar barra, dejar contenido limpio */
@media print {
    .fl-editor {
        border: none;
    }
    .fl-editor-barra {
        display: none !important;
    }
    .fl-editor-area {
        padding: 0;
        max-height: none;
        overflow: visible;
    }
}