/* assets/visual_designer/styles/visual_designer_base.css

   Skin ÚNICO para los editores GrapesJS del panel (T-1050, Fase 111;
   unificado con `Marketing/assets/styles/email_designer.css` en VIK-168,
   Fase 5 del rebranding, "VisualDesigner"). Se importa desde
   `visual_designer_controller_base.js`, así que llega a CUALQUIER editor que
   extienda esa base — el diseñador de emails (`.email-designer`, clase de
   `@Marketing/panel/_email_designer.html.twig`) y el de páginas propias
   (`.visual-designer`, clase de `@Landing/panel/page_form.html.twig`)
   comparten selectores idénticos aquí (mismo BEM en ambos, ver
   `VisualDesigner/README.md`): un editor nuevo solo necesita añadir una de
   las dos clases a su raíz para heredar este skin sin duplicar nada.

   Antes de esta tarea `.email-designer` vivía en un fichero propio
   (`Marketing/assets/styles/email_designer.css`, casi idéntico a este pero
   con las variables `--vz-*` de Velzon) porque su plantilla no reutilizaba
   la clase `.visual-designer` — con los dos selectores declarados aquí ya no
   hace falta esa copia; `email_designer_controller.js` deja de importarla.

   GrapesJS expone su paleta por defecto (tema oscuro) vía variables CSS
   `--gjs-*` en el propio contenedor del editor; se sobreescriben aquí
   referenciando los tokens de marca (`--primary`/`--border`/`--surface`/...,
   puente `[data-mdd-context]` de `assets/styles/mdd.css`, VIK-145) en vez de
   las `--vz-*` de Velzon, para que el editor herede el tema de marca 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,
.email-designer {
    --gjs-main-color: var(--surface);
    --gjs-primary-color: var(--primary);
    --gjs-secondary-color: var(--border);
    --gjs-tertiary-color: var(--primary);
    --gjs-quaternary-color: var(--primary);
    --gjs-font-color: var(--text);
    --gjs-font-color-active: var(--heading);
    --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(--info-base);
    --gjs-color-red: var(--danger-base);
    --gjs-color-yellow: var(--warning-base);
    --gjs-color-green: var(--success-base);
    --gjs-left-width: 0%;
    --gjs-color-highlight: var(--primary);
    --gjs-color-warn: var(--warning-base);
    --gjs-light-border: var(--border);
    --gjs-arrow-color: var(--text);
    --gjs-main-font: var(--font-sans);
    --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,
.email-designer__canvas {
    height: calc(100vh - 360px);
    min-height: 420px;
}

.visual-designer__canvas .gjs-editor,
.visual-designer__canvas .gjs-cv-canvas,
.email-designer__canvas .gjs-editor,
.email-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,
.email-designer .gjs-block-category .gjs-title {
    background-color: var(--bg-alt);
    color: var(--text);
    font-weight: 600;
}

.visual-designer .gjs-block,
.email-designer .gjs-block {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: .25rem;
    color: var(--text);
    height: auto;
    min-height: 90px;
    padding: .5rem;
}

.visual-designer .gjs-block:hover,
.email-designer .gjs-block:hover {
    border-color: var(--primary);
}

/* Miniatura + descripción de cada bloque de la paleta (T-1086, Fase 116,
   idea I-022): `<img class="mdd-block-thumbnail">` es la miniatura SVG
   estática del bloque (`EmailBlockDefinition::$thumbnailUrl`, puede faltar
   en bloques que aún no la declaran) y `.fs-11.text-muted` su descripción
   corta traducida (`$description`) — ambas insertadas por `registerBlocks()`
   de `assets/visual_designer/visual_designer_controller_base.js`, común a
   los dos editores. */
.visual-designer .gjs-block .mdd-block-thumbnail,
.email-designer .gjs-block .mdd-block-thumbnail {
    display: block;
    width: 100%;
    max-width: 64px;
    height: auto;
    margin: 0 auto .375rem;
}

.visual-designer .gjs-block .fs-11.text-muted,
.email-designer .gjs-block .fs-11.text-muted {
    white-space: normal;
    line-height: 1.2;
    margin-top: .125rem;
}

/* Capas: fila seleccionada/resaltada con el fondo alterno de marca en vez
   del azul por defecto de GrapesJS (que ya cubre `--gjs-color-highlight`,
   pero el fondo de hover de la fila usa una clase propia sin variable). */
.visual-designer .gjs-layer.gjs-hovered,
.visual-designer .gjs-layer.gjs-selected,
.email-designer .gjs-layer.gjs-hovered,
.email-designer .gjs-layer.gjs-selected {
    background-color: var(--bg-alt);
}

/* 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,
.email-designer .gjs-cv-canvas {
    background-color: var(--bg-alt);
}

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

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