/* src/Module/Marketing/assets/styles/email_designer.css

   Skin Velzon para GrapesJS 0.23.6 (T-1008, Fase 108) — importado desde
   `email_designer_controller.js`. GrapesJS expone su paleta por defecto
   (tema oscuro) vía variables CSS `--gjs-*` en el propio contenedor del
   editor (confirmado en `assets/vendor/grapesjs/dist/css/grapes.min.css`,
   selector `:root`); las sobreescribimos aquí referenciando las variables
   `--vz-*` ya definidas por Velzon (`public/velzon/css/bootstrap.min.css`/
   `app.min.css`) para que el editor herede 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 (fondos de cabecera de
   categoría de bloques, filas de capas, etc.) — acotados al contenedor del
   diseñador para no filtrar a otras páginas. */

.email-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 el controller): 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. */
.email-designer__canvas {
    height: calc(100vh - 360px);
    min-height: 420px;
}

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

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

.email-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);
    height: auto;
    min-height: 90px;
    padding: .5rem;
}

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

/* 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`. */
.email-designer .gjs-block .mdd-block-thumbnail {
    display: block;
    width: 100%;
    max-width: 64px;
    height: auto;
    margin: 0 auto .375rem;
}

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

/* Capas: fila seleccionada/resaltada con el azul de Velzon 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). */
.email-designer .gjs-layer.gjs-hovered,
.email-designer .gjs-layer.gjs-selected {
    background-color: rgba(61, 120, 227, .08);
}

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

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

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