/* =========================================================================
   admin-quill.css — re-skin del editor Quill (descripción larga de beneficios).
   Quill genera su DOM fuera de Blazor → el estilo debe ser GLOBAL (no scoped).
   Solo var(--…); claro/oscuro salen solos de los tokens de admin-tokens.css.
   ========================================================================= */
.rte { width: 100%; }

.rte .ql-toolbar.ql-snow {
    border: 1px solid var(--border-strong);
    border-bottom: none;
    border-top-left-radius: var(--radius-input);
    border-top-right-radius: var(--radius-input);
    background: var(--surface-2);
    padding: 8px 10px;
    font-family: var(--font-family);
}
.rte .ql-container.ql-snow {
    border: 1px solid var(--border-strong);
    border-bottom-left-radius: var(--radius-input);
    border-bottom-right-radius: var(--radius-input);
    background: var(--field);
    color: var(--ink);
    font-family: var(--font-family);
    font-size: var(--fs-sm2);
}
.rte .ql-editor { min-height: 150px; line-height: 1.6; }
.rte .ql-editor.ql-blank::before {
    color: var(--faint);
    font-style: normal;
    left: 15px;
    right: 15px;
}

/* Iconos del toolbar (Quill usa .ql-stroke / .ql-fill) */
.rte .ql-snow .ql-stroke { stroke: var(--muted); }
.rte .ql-snow .ql-fill { fill: var(--muted); }
.rte .ql-snow .ql-picker { color: var(--muted); }

/* Hover */
.rte .ql-snow.ql-toolbar button:hover,
.rte .ql-snow.ql-toolbar .ql-picker-label:hover { color: var(--ink); }
.rte .ql-snow.ql-toolbar button:hover .ql-stroke,
.rte .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke { stroke: var(--ink); }
.rte .ql-snow.ql-toolbar button:hover .ql-fill { fill: var(--ink); }

/* Activo / seleccionado → acento */
.rte .ql-snow.ql-toolbar button.ql-active,
.rte .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.rte .ql-snow .ql-picker-item.ql-selected { color: var(--accent-text); }
.rte .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.rte .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke { stroke: var(--accent); }
.rte .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent); }

/* Dropdowns (tamaño / color) */
.rte .ql-snow .ql-picker-options {
    background: var(--surface-2);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-modal);
}
.rte .ql-snow .ql-picker-item:hover { color: var(--accent-text); }

/* Tooltip de enlace */
.rte .ql-snow .ql-tooltip {
    background: var(--surface-2);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-modal);
}
.rte .ql-snow .ql-tooltip input[type=text] {
    background: var(--field);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
}
.rte .ql-snow .ql-tooltip a { color: var(--accent-text); }

/* Foco del editor: borde + halo de acento en todo el bloque */
.rte:focus-within .ql-toolbar.ql-snow,
.rte:focus-within .ql-container.ql-snow { border-color: var(--accent); }
.rte:focus-within .ql-container.ql-snow { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Contenido */
.rte .ql-editor blockquote { border-left: 3px solid var(--accent); color: var(--muted); }
.rte .ql-editor a { color: var(--accent-text); }