[x-cloak] {
    display: none !important;
}

/* Estilos base ajustados para legibilidad senior */
body {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 16px;
    /* Tamaño base aumentado */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Variables CSS para modo Oscuro vs Claro */
body.theme-dark {
    background-color: #0A0A0A;
    color: #E6E6DF;
}

body.theme-light {
    background-color: #F4F4F0;
    color: #1A1A1A;
}

/* Adaptación de Quill para modo claro/oscuro */
body.theme-dark .ql-toolbar.ql-snow {
    border-color: #262626;
    background: #121212;
}

body.theme-dark .ql-container.ql-snow {
    border-color: #262626;
    background: #0A0A0A;
    color: #E6E6DF;
}

body.theme-dark .ql-stroke {
    stroke: #A1A1AA !important;
}

body.theme-dark .ql-fill {
    fill: #A1A1AA !important;
}

body.theme-light .ql-toolbar.ql-snow {
    border-color: #D4D4D8;
    background: #FFFFFF;
}

body.theme-light .ql-container.ql-snow {
    border-color: #D4D4D8;
    background: #FFFFFF;
    color: #18181B;
}

/* ==========================================
   TRUMBOWYG — INTEGRACIÓN CON modoOscuro
   ========================================== */

/* Transiciones y estructura */
.editor-tema-claro .trumbowyg-box,
.editor-tema-oscuro .trumbowyg-box {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    transition: background-color 0.2s, border-color 0.2s;
    box-sizing: border-box;
}

/* ================= TEMA CLARO ================= */

.editor-tema-claro .trumbowyg-box {
    background: #ffffff !important;
    border: 1px solid #D4D4D8 !important;
}

.editor-tema-claro .trumbowyg-button-pane {
    background: #F4F4F0 !important;
    border-bottom: 1px solid #E4E4E7 !important;
}

.editor-tema-claro .trumbowyg-editor {
    background: #ffffff !important;
    color: #18181B !important;
}

.editor-tema-claro .trumbowyg-button-pane button svg {
    fill: #18181B !important;
}

.editor-tema-claro .trumbowyg-button-pane button:hover {
    background: #E4E4E7 !important;
}

.editor-tema-claro .trumbowyg-button-pane button.trumbowyg-active {
    background: #D4D4D8 !important;
}

.editor-tema-claro .trumbowyg-editor a {
    color: #18181B !important;
}

.editor-tema-claro .trumbowyg-editor h1,
.editor-tema-claro .trumbowyg-editor h2,
.editor-tema-claro .trumbowyg-editor h3 {
    color: #18181B !important;
}

/* ================= TEMA OSCURO ================= */

.editor-tema-oscuro .trumbowyg-box {
    background: #0A0A0A !important;
    border: 1px solid #262626 !important;
}

.editor-tema-oscuro .trumbowyg-button-pane {
    background: #121212 !important;
    border-bottom: 1px solid #262626 !important;
}

.editor-tema-oscuro .trumbowyg-editor {
    background: #0A0A0A !important;
    color: #E6E6DF !important;
}

.editor-tema-oscuro .trumbowyg-button-pane button svg {
    fill: #E6E6DF !important;
}

.editor-tema-oscuro .trumbowyg-button-pane button:hover {
    background: #262626 !important;
}

.editor-tema-oscuro .trumbowyg-button-pane button.trumbowyg-active {
    background: #404040 !important;
}

.editor-tema-oscuro .trumbowyg-editor a {
    color: #E6E6DF !important;
}

.editor-tema-oscuro .trumbowyg-editor h1,
.editor-tema-oscuro .trumbowyg-editor h2,
.editor-tema-oscuro .trumbowyg-editor h3 {
    color: #E6E6DF !important;
}

/* ================= AMBOS TEMAS ================= */

.editor-tema-claro .trumbowyg-editor,
.editor-tema-oscuro .trumbowyg-editor {
    min-height: 180px !important;
    padding: 1rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere;
    transition: background-color 0.2s, color 0.2s;
}

.editor-tema-claro .trumbowyg-button-pane button,
.editor-tema-oscuro .trumbowyg-button-pane button {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    border-radius: 0.375rem !important;
    transition: background-color 0.15s;
}

.editor-tema-claro .trumbowyg-box:focus-within {
    border-color: #71717A !important;
    box-shadow: 0 0 0 3px rgb(24 24 27 / 10%) !important;
}

.editor-tema-oscuro .trumbowyg-box:focus-within {
    border-color: #525252 !important;
    box-shadow: 0 0 0 3px rgb(230 230 223 / 10%) !important;
}

@media (max-width: 640px) {

    .editor-tema-claro .trumbowyg-editor,
    .editor-tema-oscuro .trumbowyg-editor {
        min-height: 160px !important;
        padding: 0.75rem !important;
    }
}