/* assets/visual_designer/styles/visual_designer_base.css

   Skin Velzon compartido para los editores GrapesJS del panel (T-1050, Fase
   111) — extraído de `Marketing\assets\styles\email_designer.css` (T-1008,
   Fase 108). Se importa desde `visual_designer_controller_base.js`, así que
   llega a CUALQUIER editor que extienda esa base; el diseñador de emails
   mantiene su propio fichero (`email_designer.css`, sin tocar en esta
   tarea) porque su plantilla usa la clase `.email-designer`, no
   `.visual-designer` — ambos ficheros conviven sin pisarse (selectores
   distintos). Un editor NUEVO (como el de páginas propias, T-1050) solo
   necesita añadir la clase `.visual-designer` a su elemento raíz para
   heredar este skin sin duplicar nada.

   GrapesJS expone su paleta por defecto (tema oscuro) vía variables CSS
   `--gjs-*` en el propio contenedor del editor; se sobreescriben aquí
   referenciando las variables `--vz-*` de Velzon para heredar el tema claro
   del panel sin duplicar colores a mano. Los selectores `.gjs-*` sueltos de
   más abajo cubren SOLO lo que no tiene variable equivalente — acotados al
   contenedor del editor para no filtrar a otras páginas. */

.visual-designer {
    --gjs-main-color: var(--vz-secondary-bg, #fff);
    --gjs-primary-color: var(--vz-primary, #3d78e3);
    --gjs-secondary-color: var(--vz-border-color, #e9ebec);
    --gjs-tertiary-color: var(--vz-primary, #3d78e3);
    --gjs-quaternary-color: var(--vz-primary, #3d78e3);
    --gjs-font-color: var(--vz-body-color, #212529);
    --gjs-font-color-active: #000;
    --gjs-main-dark-color: rgba(0, 0, 0, .06);
    --gjs-secondary-dark-color: rgba(0, 0, 0, .04);
    --gjs-main-light-color: rgba(0, 0, 0, .015);
    --gjs-secondary-light-color: rgba(0, 0, 0, .55);
    --gjs-soft-light-color: rgba(0, 0, 0, .015);
    --gjs-color-blue: var(--vz-info, #299cdb);
    --gjs-color-red: var(--vz-danger, #f06548);
    --gjs-color-yellow: var(--vz-warning, #f7b84b);
    --gjs-color-green: var(--vz-success, #0ab39c);
    --gjs-left-width: 0%;
    --gjs-color-highlight: var(--vz-primary, #3d78e3);
    --gjs-color-warn: var(--vz-warning, #f7b84b);
    --gjs-light-border: var(--vz-border-color, #e9ebec);
    --gjs-arrow-color: var(--vz-body-color, #212529);
    --gjs-main-font: var(--vz-font-sans-serif, "Nunito", sans-serif);
    --gjs-font-size: .8125rem;
    --gjs-canvas-top: 0px;
}

/* El editor de GrapesJS se monta sin sus paneles por defecto (`panels:
   {defaults: []}`, ver la base JS): sin esta regla el `.gjs-editor` quedaría
   con el `--gjs-canvas-top` a 0 pero sin nada por encima, así que basta con
   que el lienzo ocupe todo el contenedor propio. */
.visual-designer__canvas {
    height: calc(100vh - 360px);
    min-height: 420px;
}

.visual-designer__canvas .gjs-editor,
.visual-designer__canvas .gjs-cv-canvas {
    height: 100%;
}

/* Paleta de bloques: cabecera de categoría legible sobre fondo claro. */
.visual-designer .gjs-block-category .gjs-title {
    background-color: var(--vz-light, #f3f6f9);
    color: var(--vz-body-color, #212529);
    font-weight: 600;
}

.visual-designer .gjs-block {
    background-color: var(--vz-secondary-bg, #fff);
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: .25rem;
    color: var(--vz-body-color, #212529);
}

.visual-designer .gjs-block:hover {
    border-color: var(--vz-primary, #3d78e3);
}

/* Capas: fila seleccionada/resaltada con el azul de Velzon en vez del azul
   por defecto de GrapesJS. */
.visual-designer .gjs-layer.gjs-hovered,
.visual-designer .gjs-layer.gjs-selected {
    background-color: rgba(61, 120, 227, .08);
}

/* Vista móvil: el lienzo reduce su ancho al del dispositivo activo; se
   centra dentro del contenedor para que se note el cambio. */
.visual-designer .gjs-cv-canvas {
    background-color: var(--vz-light, #f3f6f9);
}

/* Banda de onboarding descartable (recordada en `localStorage`). */
.visual-designer__onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.visual-designer__onboarding-step .badge {
    flex-shrink: 0;
}