/* ══ generador-de-dietas.aspx ══
   El constructor de dietas de la portada en su propia página. Los componentes
   (buscador, lista, anillos, loader, modales) siguen saliendo de inicio.css,
   que llega en el bundle de la portada; aquí solo vive el escenario: el papel
   cuadriculado, los tres pasos y el banco de trabajo.

   Paleta: la de la marca.
     bosque   #00261a  fondo del escenario
     pino     #003d28  (--primary-dark) banco de trabajo
     menta    #c1eec3  (--primary-soft) lo que está vivo / logrado
   Tipos: Inter para leer y Space Grotesk para los pasos. Ya los carga el
   Site.Master: cero peticiones de fuentes nuevas. */

.gd-stage {
    --gd-bosque: #00261a;
    --gd-linea: rgba(193, 238, 195, .055);
    --gd-tinta-2: rgba(255, 255, 255, .72);
    /* .6 y no menos: sobre el banco de trabajo (más claro que el fondo) .5 quedaba
       en 4,4:1 con texto de 13px; .6 pasa de 5:1 en los dos fondos. */
    --gd-tinta-3: rgba(255, 255, 255, .6);
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--nav-h, 71px) + var(--space-xl)) 0 var(--space-3xl);
    /* Papel cuadriculado de cuaderno de laboratorio, sobre el verde bosque. */
    background:
        radial-gradient(ellipse 70% 55% at 88% 100%, rgba(0, 109, 67, .55) 0%, transparent 70%),
        linear-gradient(var(--gd-linea) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, var(--gd-linea) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--gd-bosque);
}

    .gd-stage::after {
        display: none;
    }

    /* El escenario es toda la página: la barra y la card usan el 90 % del ancho
       de la pantalla en vez de los 1200px del contenedor del sitio. */
    .gd-stage > .container {
        width: 90%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

/* ── Barra: vuelta a la portada y los tres pasos ── */
.gd-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.gd-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 40px;
    padding: 8px 16px 8px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(193, 238, 195, .22);
    color: var(--gd-tinta-2);
    font: 500 14px/1 var(--font-body);
    text-decoration: none;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

    .gd-back svg {
        width: 18px;
        height: 18px;
        transition: transform .25s cubic-bezier(.32, .72, 0, 1);
    }

    .gd-back:hover {
        color: #fff;
        border-color: var(--primary-soft);
        background: rgba(193, 238, 195, .08);
        text-decoration: none;
    }

        .gd-back:hover svg {
            transform: translateX(-3px);
        }

    .gd-back:focus-visible {
        outline: 2px solid var(--primary-soft);
        outline-offset: 3px;
    }

.gd-rail {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gd-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gd-tinta-3);
    font: 500 13px/1 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .35s ease;
}

    /* El tramo entre pasos se llena al completar el anterior. */
    .gd-step + .gd-step::before {
        content: '';
        width: clamp(24px, 4vw, 56px);
        height: 1px;
        margin: 0 14px;
        background: rgba(255, 255, 255, .18);
        transition: background .4s ease;
    }

    .gd-step.is-done + .gd-step::before {
        background: var(--primary-soft);
    }

.gd-step-n {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    font-size: 12px;
    letter-spacing: 0;
    transition: background .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}

.gd-step.is-current {
    color: #fff;
}

    .gd-step.is-current .gd-step-n {
        border-color: var(--primary-soft);
        color: var(--primary-soft);
        box-shadow: 0 0 0 4px rgba(193, 238, 195, .12);
    }

.gd-step.is-done {
    color: var(--primary-soft);
}

    .gd-step.is-done .gd-step-n {
        background: var(--primary-soft);
        border-color: var(--primary-soft);
        color: var(--gd-bosque);
    }

/* Hecho no se dice solo con color: el número cede su sitio a un check. */
.gd-step-ok {
    display: none;
    width: 14px;
    height: 14px;
}

.gd-step.is-done .gd-step-num {
    display: none;
}

.gd-step.is-done .gd-step-ok {
    display: block;
}

/* ── Banco de trabajo: el constructor ── */
/* Dos cards: la de trabajo (buscador + alimentos seleccionados) y la del balance.
   No hay envoltorios nuevos en el HTML —la rejilla de 3 columnas es de
   inicio.css y la usa inicio-hero.js—: la primera card es el ::before de la
   rejilla, colocado detrás de las columnas 1 y 2, y la segunda es la columna del
   balance misma. --gd-p es el relleno de las dos; el ::before lo gana con
   márgenes negativos, por eso el constructor reserva ese mismo relleno. */
.gd-builder {
    /* Sin sangría: aquí no hay lista de modalidades con puntos que alinear. */
    --db-sangria: 0px;
    --gd-p: 28px;
    max-width: none;
    padding: var(--gd-p);
    background: none;
    border: 0;
    box-shadow: none;
}

.gd-builder .db-grid::before,
.gd-builder .db-gauges {
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(0, 61, 40, .62), rgba(0, 61, 40, .38));
    border: 1px solid rgba(193, 238, 195, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .5);
}

/* Toda columna con sitio fijo: si una se colocara sola, el ::before (colocado a
   mano) le quitaría su celda y la empujaría a otra fila. */
    .gd-builder .db-grid::before {
        content: '';
        grid-column: 1 / 3;
        grid-row: 1;
        align-self: stretch;
        margin: calc(var(--gd-p) * -1);
    }

.gd-builder .db-intro {
    grid-column: 1;
    grid-row: 1;
}

.gd-builder .db-selected {
    grid-column: 2;
    grid-row: 1;
}

/* La card del balance: entre las dos cards queda --gd-p (el hueco de la
   rejilla menos lo que sobresale la primera). */
.gd-builder .db-gauges {
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    margin: calc(var(--gd-p) * -1) calc(var(--gd-p) * -1) calc(var(--gd-p) * -1) 0;
    padding: var(--gd-p);
}

/* El balance ya es una card: el recuadro interior de inicio.css (.db-panel)
   quedaba como una caja dentro de otra. Se queda solo su contenido. */
.gd-builder .db-gauges .db-panel {
    padding: var(--space-md) 0 0;
    background: none;
    border: 0;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* El aviso de bloqueo cubre la card entera: con sus mismas esquinas. */
.gd-builder .db-gauges.gd-bloqueado::after {
    border-radius: inherit;
}

/* — Lo que crece y lo que se queda —
   Solo la columna del medio (desayuno, almuerzo, merienda) crece con los
   alimentos: sin el tope de alto de inicio.css, ni scroll propio. El buscador y
   la card del balance la acompañan pegados arriba (sticky), siempre y no solo
   con la lista larga. Pegados no pueden estirarse al alto de la fila: van a su
   alto natural; la card de trabajo la dibuja el ::before, que sí se estira. */
.gd-builder .db-list {
    max-height: none;
    overflow-y: visible;
}

@media (min-width: 993px) {
    .gd-builder .db-intro,
    .gd-builder .db-gauges {
        position: sticky;
        top: calc(var(--nav-h, 71px) + var(--space-lg));
        align-self: start;
    }

    /* La card del balance se pega con su propio borde: le basta un respiro
       corto bajo el menú. */
    .gd-builder .db-gauges {
        top: calc(var(--nav-h, 71px) + var(--space-md));
    }
}

    .gd-builder .db-field,
    .gd-builder .db-cta {
        width: 100%;
    }

    .gd-builder .db-search-label strong {
        font-size: 15px;
    }

/* La lista de alimentos deja de ser desplegable: va debajo del campo, en el
   flujo de la columna, y siempre abierta (inicio-hero.js no la cierra en esta
   página). Seis filas como máximo, para que "Dietas ya preparadas" quede a la
   vista debajo: 289 = 12 padding + 2 borde + 32 cabecera + 6 x 40.4 de fila
   (filas enteras, nunca media cortada). El resto de la despensa queda a un scroll. El panel de
   tipos sí sigue flotando, por encima de ella. */
.gd-builder .db-suggest.open:not(.db-typelist) {
    position: static;
    margin-top: 10px;
    max-height: 289px;
    box-shadow: 0 2px 10px rgba(0, 45, 30, .18);
}

/* El filtro y la lupa se anclan a la altura del input, no al centro del campo:
   así no bajan aunque la lista quede dentro del campo (marcado viejo del .aspx). */
@media (min-width: 561px) {
    .gd-builder .db-filter {
        bottom: auto;
        height: calc(var(--db-input-h) - 12px);
    }

    .gd-builder .db-search-icon {
        top: calc(var(--db-input-h) / 2);
    }
}

/* El precio en una sola línea: partido en dos ("$0.25 /100" + "g") cada fila
   crecía al doble. */
.gd-builder .db-suggest-item .db-kcal {
    white-space: nowrap;
}

/* — Dieta optimizada y al tope —
   El buscador se queda a la vista pero apagado, y su placeholder (lo pone
   inicio-hero.js) dice cómo volver a usarlo. Sin opciones que ofrecer, la lista
   se va. */
.gd-builder.db-tope .db-suggest:not(.db-typelist) {
    display: none;
}

.gd-builder.db-tope .db-field {
    cursor: not-allowed;
}

    .gd-builder.db-tope .db-input:disabled {
        background: rgba(255, 255, 255, .78);
        border: 1px dashed rgba(0, 61, 40, .35);
        color: var(--text-muted);
        opacity: 1;
    }

        .gd-builder.db-tope .db-input:disabled::placeholder {
            color: var(--primary-dark, #003d28);
            font-weight: 600;
            opacity: 1;
        }

/* Las tres columnas están desde el primer pintado, aunque la despensa aún no
   llegue: la lista vacía y los anillos en cero esperan en su sitio, y el plato
   de partida entra sin mover nada. */
.gd-builder:not(.building) .db-selected,
.gd-builder:not(.building) .db-gauges {
    display: block;
}

/* La rejilla se manda por id: inicio.css la toca con .diet-builder.building y
   :not(.building), que pesan más que una clase y pisaban columnas y huecos.
   minmax(0, …) y no 1fr a secas: 1fr no encoge por debajo de su contenido, y
   los nombres de la despensa van en una línea (nowrap). Con la lista siempre
   abierta, el alimento más largo estiraba la columna a ~870px en un teléfono de
   360px y todo se salía de la pantalla. Vale con y sin alimentos elegidos. */
#diet-builder.gd-builder .db-grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
    column-gap: calc(var(--gd-p) * 2);
    row-gap: calc(var(--gd-p) * 2);
}

/* Tableta: la card de trabajo arriba con sus dos columnas, la del balance
   debajo a todo el ancho. */
@media (max-width: 992px) {
    #diet-builder.gd-builder .db-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .gd-builder .db-gauges {
        grid-column: 1 / -1;
        grid-row: 2;
        /* inicio.css le pone width: 100%, que anulaba los márgenes negativos
           y la dejaba más angosta que la card de arriba. */
        width: auto;
        max-width: none;
        margin: 0 calc(var(--gd-p) * -1) calc(var(--gd-p) * -1);
    }
}

/* Teléfono: todo en una columna. La card de trabajo abarca buscador y
   alimentos (filas 1 y 2); el balance va en la 3. */
@media (max-width: 768px) {
    .gd-builder {
        --gd-p: 16px;
    }

    #diet-builder.gd-builder .db-grid {
        grid-template-columns: minmax(0, 1fr);
    }

        #diet-builder.gd-builder .db-grid::before {
            grid-column: 1;
            grid-row: 1 / 3;
        }

    .gd-builder .db-selected {
        grid-column: 1;
        grid-row: 2;
    }

    .gd-builder .db-gauges {
        grid-row: 3;
    }
}

.gd-builder .db-grid > * {
    min-width: 0;
}

/* — Bloqueo hasta el primer alimento —
   Lista y balance se ven apagados y no responden (el script les pone inert).
   Encima, una capa que al pasar el ratón —o al tocar, en el teléfono— dice qué
   falta. La capa es la columna misma (::after), no un elemento aparte. */
.gd-bloqueado {
    position: relative;
    cursor: not-allowed;
}

/* Bloqueadas, las columnas se estiran al alto de la fila: así la capa del aviso
   cubre toda la columna y no solo el encabezado de una lista vacía. */
.gd-builder:not(.building) .db-grid {
    align-items: stretch;
}

    .gd-bloqueado > * {
        opacity: .32;
        filter: grayscale(.7);
        pointer-events: none;
        transition: opacity .35s ease, filter .35s ease;
    }

    .gd-bloqueado::after {
        content: 'Seleccione un alimento primero';
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-md);
        border: 1px dashed rgba(193, 238, 195, .35);
        border-radius: var(--radius-md);
        background: rgba(0, 38, 26, .55);
        font: 600 15px/1.4 var(--font-body);
        color: var(--primary-soft);
        text-align: center;
        opacity: 0;
        transition: opacity .2s ease;
    }

    .gd-bloqueado:hover::after,
    .gd-bloqueado.gd-avisando::after {
        opacity: 1;
    }

/* La barra de alimentos rebota para señalar por dónde se empieza: cae, se
   aplasta un poco y vuelve, con un halo menta en el campo. */
.gd-builder .db-field.gd-rebote {
    animation: gdRebote .7s cubic-bezier(.28, .84, .42, 1);
}

    .gd-builder .db-field.gd-rebote .db-input {
        box-shadow: 0 0 0 4px rgba(193, 238, 195, .45), var(--shadow-md);
    }

@keyframes gdRebote {
    0% { transform: translateY(0); }
    25% { transform: translateY(-14px); }
    45% { transform: translateY(0) scaleY(.97); }
    62% { transform: translateY(-6px); }
    78% { transform: translateY(0); }
    90% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

@keyframes gdAviso {
    from { opacity: 1; }
    to { opacity: 1; }
}

/* "Opciones de desarrollador" (solo IP autorizada): inicio.css esconde #db-dev
   en data-modo="generar", que aquí es fijo. Debajo de las acciones, a lo ancho,
   y marcado mientras su panel está abierto. */
.gd-builder[data-modo="generar"] #db-dev:not([hidden]) {
    display: inline-flex;
    width: 100%;
    margin-top: var(--space-sm);
}

.gd-builder #db-dev[aria-expanded="true"] {
    border-color: var(--primary-soft);
    background: rgba(193, 238, 195, .14);
}

/* — Sticky en "Su dieta" —
   Mientras la dieta crece se quedan a mano, pegados bajo el menú: la cabecera
   (título, cuenta, optimizar o ver la evolución, y reiniciar) y, debajo de
   ella, el nombre de cada comida hasta que empieza la siguiente (el sticky de
   .db-meal-head vive dentro de su .db-meal). El alto de la cabecera lo mide
   el script de la página (--gd-cabeza-h).
   Solo pegados (.is-pegada, también del script) llevan fondo —el tono del
   degradado de la card sobre el bosque— para que las filas que pasan por
   debajo no se transparenten; sueltos, un fondo sólido taparía la cuadrícula
   y se vería como un parche. El box-shadow alarga el fondo a los lados sin
   mover nada. Solo en escritorio: apilado, robaría pantalla. */
.gd-builder .gd-cabeza {
    margin-bottom: var(--space-lg);
}

    .gd-builder .gd-cabeza .gd-acciones {
        margin-bottom: 0;
    }

@media (min-width: 993px) {
    .gd-builder .gd-cabeza {
        position: sticky;
        top: calc(var(--nav-h, 71px) + var(--space-md));
        z-index: 4;
        transition: box-shadow .2s ease, background .2s ease;
    }

    .gd-builder .db-meal-head {
        position: sticky;
        top: calc(var(--nav-h, 71px) + var(--space-md) + var(--gd-cabeza-h, 120px) + 14px);
        z-index: 3;
        transition: box-shadow .2s ease, background .2s ease;
    }

    .gd-builder .gd-cabeza.is-pegada,
    .gd-builder .db-meal-head.is-pegada {
        background: #003221;
    }

    .gd-builder .gd-cabeza.is-pegada {
        box-shadow: 0 0 0 12px #003221;
    }

    .gd-builder .db-meal-head.is-pegada {
        box-shadow: 0 0 0 6px #003221, 0 16px 16px -10px rgba(0, 20, 13, .75);
    }
}

/* — Fila de acciones de "Su dieta" —
   "Optimizar esta dieta" 85 % y "Reiniciar" 15 % (solo el ícono; su nombre
   va en aria-label y lo que hace, en el tooltip). Optimizada la dieta, el
   lugar de optimizar lo toma el aviso de fase, que trae "Ver evolución de la
   dieta"; si optimizar vuelve (un retoque la dejó bajo el 100 %), el aviso
   baja a una segunda línea a todo el ancho. Cada pieza con su celda fija: con
   alguna oculta, las demás no deben correrse de pista.
   Sin "Reiniciar", lo que haya ocupa la fila entera (eso ya lo hace
   inicio.css con :has sobre .db-cta-row). */
.gd-builder .gd-acciones {
    grid-template-columns: minmax(0, 17fr) minmax(0, 3fr);
    align-items: stretch;
    row-gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

    .gd-builder .gd-acciones .db-actions,
    .gd-builder .gd-acciones .db-phase {
        min-width: 0;
        margin: 0;
    }

    .gd-builder .gd-acciones .db-actions {
        grid-column: 1;
        grid-row: 1;
    }

    .gd-builder .gd-acciones .db-phase {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .gd-builder .gd-acciones .db-reset {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        gap: 0;
        /* inicio.css le pone overflow: hidden (para que el texto no se parta al
           entrar); recortaba el globo del tooltip, que es su ::after. Solo con
           el ícono ya no hace falta. */
        overflow: visible;
    }

        .gd-builder .gd-acciones .db-reset svg {
            width: 20px;
            height: 20px;
        }

    /* .eq-tip y .db-phase traen su propio display, que le gana al [hidden]. */
    .gd-builder .gd-acciones .db-actions[hidden],
    .gd-builder .gd-acciones .db-phase[hidden] {
        display: none;
    }

/* El contenedor de optimizar lleva el tooltip (.eq-tip), pero no su aspecto:
   sigue siendo la columna del botón y su nota. */
.gd-builder .gd-acciones .db-actions.eq-tip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    cursor: default;
}

/* Ya optimizada: el aviso sube a la fila, al lado de "Reiniciar". */
.gd-builder .gd-acciones:has(> .db-actions[hidden]) .db-phase {
    grid-column: 1;
    grid-row: 1;
}

/* Sin optimizar ni aviso, "Reiniciar" se queda la fila entera. */
.gd-builder .gd-acciones:has(> .db-actions[hidden]):has(> .db-phase[hidden]) {
    grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
    column-gap: 0;
}

/* "Ver evolución de la dieta" es un botón, no un enlace: todo el aviso es la
   superficie que se pulsa, con el alto de "Optimizar esta dieta" y sin
   subrayado. El color menta del aviso se queda. */
.gd-builder .gd-acciones .db-phase[data-state="done"] {
    min-height: 48px;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

    .gd-builder .gd-acciones .db-phase[data-state="done"]::before {
        margin-top: 0;
    }

.gd-builder .gd-acciones .db-phase:has(.db-phase-evol) {
    padding: 0;
}

    .gd-builder .gd-acciones .db-phase:has(.db-phase-evol)::before {
        display: none;
    }

.gd-builder .gd-acciones .db-phase-evol {
    flex: 1;
    align-self: stretch;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    padding: 0 var(--space-md);
}

    .gd-builder .gd-acciones .db-phase-evol span {
        text-decoration: none;
    }

    .gd-builder .gd-acciones .db-phase-evol:focus-visible {
        outline: 2px solid var(--primary-soft);
        outline-offset: 3px;
    }

    /* Mientras llegan los gráficos, el ✓ (que ahora es loader) se perdía con
       el ::before oculto: el loader va en el propio botón. */
    .gd-builder .gd-acciones .db-phase-evol:disabled svg {
        border: 2px solid rgba(0, 61, 40, .25);
        border-top-color: currentColor;
        border-radius: 50%;
        stroke: none;
        animation: dbSpin .8s linear infinite;
    }

/* En la columna del buscador ya solo queda "Dietas ya preparadas": a lo ancho. */
.gd-builder .db-cta .db-cta-row {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
}

/* El texto de "1.000 platos…" va debajo del botón, no encima: el aire pasa
   de abajo a arriba. */
.gd-builder .db-cta .db-pitch {
    max-width: none;
    margin: var(--space-md) 0 0;
}

.gd-perfil {
    margin: var(--space-lg) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font: 400 13px/1.5 var(--font-body);
    color: var(--gd-tinta-3);
}

/* ── Tableta y teléfono ── */
@media (max-width: 768px) {
    .gd-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        margin-bottom: var(--space-xl);
    }

    /* A todo el ancho: los tramos entre pasos se estiran o encogen y los tres
       pasos caben siempre en una línea, sin scroll horizontal. */
    .gd-rail {
        width: 100%;
    }

    .gd-step + .gd-step {
        flex: 1;
    }

        .gd-step + .gd-step::before {
            flex: 1;
            width: auto;
            min-width: 8px;
        }
}

@media (max-width: 560px) {
    .gd-stage {
        padding-top: calc(var(--nav-h, 71px) + var(--space-md));
    }

    /* En el teléfono la barra (Portada y los tres pasos) sobra: el menú del
       sitio ya lleva de vuelta y el espacio vertical es para el buscador. */
    .gd-bar {
        display: none;
    }

    /* inicio.css saca 24px el scroll de la lista a la derecha; con el poco
       relleno de la card en el teléfono eso caía fuera de la pantalla. */
    .gd-builder .db-list {
        margin-right: -8px;
    }

    /* Al 90 % sobraba margen a los lados en 360px: casi a todo el ancho. */
    .gd-stage > .container {
        width: auto;
        padding-left: 12px;
        padding-right: 12px;
    }

    .gd-step + .gd-step::before {
        margin: 0 8px;
    }

    .gd-step-t {
        font-size: 12px;
    }
}

/* Teléfonos de 320-400px: "OPTIMIZA" en mayúsculas espaciadas no cabía. */
@media (max-width: 400px) {
    .gd-step {
        gap: 6px;
        letter-spacing: .02em;
    }

    .gd-step-t {
        font-size: 11px;
    }

    .gd-step-n {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .gd-step + .gd-step::before {
        margin: 0 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gd-step,
    .gd-step-n,
    .gd-back svg {
        transition: none;
    }

    .gd-builder .gd-acciones .db-phase-evol:disabled svg {
        animation-duration: 2.4s;
    }

    /* Sin rebote: el aviso queda en el halo del campo, que se sostiene lo mismo. */
    .gd-builder .db-field.gd-rebote {
        animation: gdAviso .7s linear;
    }
}