/* ==========================================================================
   INCODAP · Industria · Tu diagnóstico
   Asistente de cinco pasos con el boceto de la solución armándose en vivo.
   Usa los tokens y componentes de industria.css; todo lo propio lleva dg-.
   El boceto es un "sketch": lo que aún no existe se dibuja con línea
   punteada y se vuelve sólido cuando la respuesta lo llena.
   ========================================================================== */

.dg-app {
    --dg-borde-campo: #8f979f;   /* 3.1:1 sobre blanco: el contorno del campo se distingue */
    --dg-piso-marcado: #fce6e4;
    container: dg-app / inline-size;
}
.dg-app [hidden] { display: none !important; }
.dg-app { touch-action: manipulation; }
.dg-chip, .dg-opcion, .dg-acepto__etiqueta, .dg-progreso__paso, .dg-boceto__tira { -webkit-tap-highlight-color: transparent; }
.dg-boceto__cuerpo, .dg-exito, .dg-reconoce { overflow-wrap: anywhere; }

/* Que el pie pegajoso nunca tape el campo que recibe el foco con Tab */
.modulo--completo[data-modulo="diagnostico"] { scroll-padding-bottom: 104px; scroll-padding-top: 16px; }
.dg-invisible { visibility: hidden; }
.dg-solo-movil { display: none; }

/* --------------------------------------------------------------------------
   Arriba: título y progreso
   -------------------------------------------------------------------------- */

.dg-arriba { display: grid; gap: 1.15rem; margin-bottom: clamp(1.4rem, 2.4vw, 2rem); }
.dg-arriba__titulo {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.6rem, 2.3vw, 2.1rem);
    letter-spacing: -.032em;
    line-height: 1.06;
    color: var(--tinta);
    text-wrap: balance;
}
.dg-arriba__texto .apoyo { margin-top: .4rem; max-width: 60ch; }

.dg-progreso ol { display: flex; align-items: center; gap: 0; }
.dg-progreso__item { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.dg-progreso__item:last-child { flex: 0 1 auto; }
.dg-progreso__item::after {
    content: "";
    flex: 1 1 auto;
    min-width: 10px;
    height: 1.5px;
    margin: 0 .55rem 0 .2rem;
    border-radius: 2px;
    background: var(--linea);
    transition: background-color 240ms ease;
}
.dg-progreso__item:last-child::after { display: none; }
.dg-progreso__item[data-hecho]::after { background: var(--tinta); }

.dg-progreso__paso {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    min-width: 0;
    padding: .3rem .6rem .3rem .3rem;
    border-radius: 11px;
    color: var(--tinta-3);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    transition: background-color 160ms ease, color 160ms ease;
}
.dg-progreso__paso:disabled { cursor: default; }
.dg-progreso__nombre { min-width: 0; text-wrap: balance; }
.dg-progreso__num {
    position: relative;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid #c3c9cf;
    background: var(--blanco);
    font-family: var(--display);
    font-size: .82rem;
    font-weight: 700;
    color: var(--tinta-3);
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.dg-progreso__check { position: absolute; width: 15px; height: 15px; stroke-width: 2.6; opacity: 0; }
.dg-progreso__item[data-hecho] .dg-progreso__paso { color: var(--tinta-2); }
.dg-progreso__item[data-hecho] .dg-progreso__num { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.dg-progreso__item[data-hecho] .dg-progreso__digito { opacity: 0; }
.dg-progreso__item[data-hecho] .dg-progreso__check { opacity: 1; }
.dg-progreso__item[data-actual] .dg-progreso__paso { color: var(--tinta); }
.dg-progreso__item[data-actual] .dg-progreso__num { background: var(--rojo); border-color: var(--rojo); color: #fff; box-shadow: 0 4px 12px rgba(212, 32, 26, .24); }
@media (hover: hover) and (pointer: fine) {
    .dg-progreso__paso:not(:disabled):not([aria-current]):hover { background: var(--linea-2); color: var(--tinta); }
}
.dg-app[data-fase="exito"] .dg-progreso,
.dg-app[data-fase="exito"] .dg-arriba__texto .apoyo { display: none; }

/* --------------------------------------------------------------------------
   Rejilla: pasos a la izquierda, boceto a la derecha
   -------------------------------------------------------------------------- */

.dg-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 35%, 432px);
    gap: clamp(1.75rem, 3.4vw, 3.25rem);
    align-items: start;
}

.dg-pasos { min-width: 0; container: dg-pasos / inline-size; }

.dg-paso__cabeza { display: grid; gap: .45rem; margin-bottom: 1.7rem; }
.dg-paso__titulo { font-size: clamp(1.45rem, 1.85vw, 1.8rem); letter-spacing: -.028em; outline: none; scroll-margin-top: 1.5rem; }
.dg-paso__titulo:focus, .dg-paso__titulo:focus-visible { outline: none; }   /* foco programático al cambiar de paso: el lector lo anuncia */
.dg-paso__cabeza .apoyo { max-width: 64ch; }
.dg-paso__cuerpo { display: grid; gap: 1.9rem; }

/* Grupos de opciones */
.dg-grupo, .dg-area { border: 0; margin: 0; padding: 0; min-width: 0; }
.dg-grupo__titulo, .dg-area__titulo { float: left; width: 100%; padding: 0; }
.dg-grupo__titulo + *, .dg-area__titulo + * { clear: left; }
.dg-grupo__titulo {
    margin-bottom: .75rem;
    font-family: var(--display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: 1.3;
    color: var(--tinta);
}
.dg-grupo__ayuda { margin: -.4rem 0 .75rem; }
.dg-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Chip con control nativo: radio (uno) o casilla (varios) */
.dg-chip {
    position: relative;
    min-height: 44px;
    padding: .55rem 1rem .55rem .75rem;
    gap: .6rem;
    -webkit-user-select: none;
    user-select: none;
}
.dg-chip input,
.dg-opcion input,
.dg-acepto__etiqueta input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    border-radius: inherit;
}
.dg-chip__marca {
    position: relative;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--dg-borde-campo);
    background: var(--blanco);
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.dg-chip__marca--caja { border-radius: 5px; }
.dg-chip__marca--icono { border: 0; background: none; border-radius: 5px; }
.dg-chip .dg-chip__icono { width: 17px; height: 17px; color: var(--tinta-3); transition: opacity 140ms ease; }
.dg-chip__caja {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    opacity: 0;
    transform: scale(.7);
    transition: opacity 140ms ease, transform 200ms var(--ease-out);
}
.dg-chip .dg-chip__caja .icono { width: 12px; height: 12px; stroke-width: 3.2; color: #fff; }
.dg-chip__texto { line-height: 1.25; }

.dg-chip:has(input:checked) { background: var(--rojo-piso); border-color: rgba(212, 32, 26, .45); color: var(--rojo-tinta); }
.dg-chip--uno:has(input:checked) .dg-chip__marca { border-color: var(--rojo); background: var(--rojo); box-shadow: inset 0 0 0 3.5px #fff; }
.dg-chip--varios:has(input:checked) .dg-chip__marca--caja { border-color: var(--rojo); background: var(--rojo); }
.dg-chip--varios:has(input:checked) .dg-chip__caja { opacity: 1; transform: none; }
.dg-chip--varios:has(input:checked) .dg-chip__marca--icono .dg-chip__caja { background: var(--rojo); }
.dg-chip--varios:has(input:checked) .dg-chip__icono { opacity: 0; }
.dg-chip:has(input:focus-visible) { outline: 2px solid var(--rojo); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .dg-chip:hover .dg-chip__marca:not(.dg-chip__marca--icono) { border-color: var(--tinta-2); }
    .dg-chip:has(input:checked):hover { border-color: var(--rojo); }
}

.dg-chip__cuenta {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-right: -.35rem;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--nieve);
    border: 1px solid var(--linea);
    color: var(--tinta-2);
    font-size: .76rem;
    font-weight: 700;
}
.dg-chip:has(input:checked) .dg-chip__cuenta { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* Reconocer lo que ya trae de la planta o de Conexiones */
.dg-reconoce {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .95rem;
    border-radius: 12px;
    border: 1px solid var(--linea);
    background: var(--blanco);
    font-size: .93rem;
    line-height: 1.45;
    color: var(--tinta);
}
.dg-reconoce .icono { width: 18px; height: 18px; margin-top: 1px; color: var(--rojo); }

/* Paso 3: problemas por área */
.dg-areas { display: grid; gap: 1.6rem; }
@container dg-pasos (min-width: 760px) {
    .dg-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
}
.dg-area__titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tinta);
}
.dg-area__titulo .icono { width: 18px; height: 18px; color: var(--tinta-3); }
.dg-area__cuenta { margin-left: auto; font-family: var(--texto); font-size: .8rem; font-weight: 600; letter-spacing: 0; color: var(--rojo-tinta); }
.dg-opciones { display: grid; gap: .45rem; }

.dg-opcion {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    min-height: 46px;
    padding: .72rem .95rem .72rem .85rem;
    border-radius: 12px;
    border: 1px solid var(--linea);
    background: var(--blanco);
    font-size: .94rem;
    line-height: 1.4;
    color: var(--tinta);
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out);
}
.dg-opcion:active { transform: scale(.985); }
.dg-opcion__caja {
    position: relative;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 5px;
    border: 1.5px solid var(--dg-borde-campo);
    background: var(--blanco);
    color: #fff;
    transition: background-color 160ms ease, border-color 160ms ease;
}
.dg-opcion__caja .icono { width: 12px; height: 12px; stroke-width: 3.2; opacity: 0; transform: scale(.6); transition: opacity 140ms ease, transform 200ms var(--ease-out); }
.dg-opcion:has(input:checked) { background: var(--rojo-piso); border-color: rgba(212, 32, 26, .4); }
.dg-opcion:has(input:checked) .dg-opcion__caja,
.dg-acepto__etiqueta:has(input:checked) .dg-opcion__caja { background: var(--rojo); border-color: var(--rojo); }
.dg-opcion:has(input:checked) .dg-opcion__caja .icono,
.dg-acepto__etiqueta:has(input:checked) .dg-opcion__caja .icono { opacity: 1; transform: none; }
.dg-opcion:has(input:focus-visible),
.dg-acepto__etiqueta:has(input:focus-visible) { outline: 2px solid var(--rojo); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .dg-opcion:not(:has(input:checked)):hover { border-color: #c9cfd5; }
    .dg-opcion:not(:has(input:checked)):hover .dg-opcion__caja { border-color: var(--tinta-2); }
}

/* Campos de texto */
.dg-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1.25rem; }
@container dg-pasos (max-width: 540px) { .dg-campos { grid-template-columns: minmax(0, 1fr); } }
.dg-campo { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.dg-campo--ancho { grid-column: 1 / -1; }
.dg-campo__etiqueta { font-size: .94rem; font-weight: 600; line-height: 1.3; color: var(--tinta); }
.dg-campo__opcional { font-weight: 500; color: var(--tinta-3); }
.dg-campo__ayuda { font-size: .84rem; line-height: 1.4; color: var(--tinta-2); }
.dg-campo__entrada {
    width: 100%;
    min-height: 48px;
    padding: .7rem .85rem;
    border: 1px solid var(--dg-borde-campo);
    border-radius: var(--radio-btn);
    background: var(--blanco);
    color: var(--tinta);
    font-size: 1rem;           /* 16 px: el iPhone no hace zoom al enfocar */
    line-height: 1.4;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.dg-campo__entrada::placeholder { color: var(--tinta-3); opacity: 1; }
.dg-campo__entrada:focus { outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(212, 32, 26, .16); }
.dg-campo__entrada--area { min-height: 104px; resize: vertical; }
.dg-con-error .dg-campo__entrada { border-color: var(--rojo); }
.dg-campo--sistema { max-width: 420px; }

.dg-acepto { margin-top: 1.4rem; }
.dg-acepto__etiqueta {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .9rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--linea);
    background: var(--blanco);
    font-size: .94rem;
    line-height: 1.45;
    cursor: pointer;
}
.dg-con-error .dg-acepto__etiqueta { border-color: var(--rojo); }

.dg-error {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .55rem;
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--rojo-tinta);
}
.dg-campo .dg-error { margin-top: .1rem; }
.dg-error .icono { width: 15px; height: 15px; margin-top: 2px; color: var(--rojo); }

/* Trampa para bots: fuera de la vista y del orden de tabulación */
.dg-trampa { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Pie de navegación, pegado abajo mientras hay scroll */
.dg-pie {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 2.25rem;
    padding: .85rem 0 .9rem;
    background: var(--nieve);
    border-top: 1px solid var(--linea);
}
.dg-pie__cuenta { margin-left: auto; margin-right: .4rem; }
.dg-pie__wa { display: none; }
.dg-pie__siguiente { min-width: 148px; }
.dg-pie__siguiente[aria-busy="true"] { opacity: 1; cursor: progress; }
.dg-girando {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: dg-girar 700ms linear infinite;
}
@keyframes dg-girar { to { transform: rotate(360deg); } }

/* Error de envío: qué pasó y dos salidas */
.dg-envio-error {
    display: grid;
    gap: .65rem;
    margin-top: 1.9rem;
    padding: 1.1rem 1.2rem 1.2rem;
    border-radius: 14px;
    border: 1px solid rgba(212, 32, 26, .35);
    background: var(--rojo-piso);
    outline: none;
}
.dg-envio-error:focus, .dg-envio-error:focus-visible { outline: none; }
.dg-envio-error { scroll-margin-bottom: 96px; }
.dg-envio-error__titulo { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-size: 1.06rem; letter-spacing: -.012em; color: var(--rojo-tinta); }
.dg-envio-error__titulo .icono { color: var(--rojo); }
.dg-envio-error__texto { color: var(--tinta); max-width: 60ch; }
.dg-envio-error__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }

/* --------------------------------------------------------------------------
   Boceto
   -------------------------------------------------------------------------- */

.dg-wa { fill: currentColor; stroke: none; }
.btn .dg-wa { width: 18px; height: 18px; }

.dg-boceto {
    position: sticky;
    top: 1.25rem;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--barra) - 2.5rem);
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-2);
    overflow: hidden;
}
.dg-boceto__tira { display: none; }
.dg-boceto__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    gap: 1.15rem;
    align-content: start;
    padding: 1.3rem 1.35rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.dg-boceto__cabeza { display: grid; gap: .15rem; }
.dg-boceto__titulo { margin-bottom: .55rem; font-size: 1.16rem; letter-spacing: -.02em; }
.dg-boceto__planta { font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--tinta); }
.dg-boceto__planta--vacia { color: var(--tinta-2); }
.dg-boceto__escala { font-size: .9rem; line-height: 1.4; color: var(--tinta-2); }

.dg-plano { margin: 0; display: grid; gap: .55rem; }
.dg-plano__tablero { padding: .65rem; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--nieve); }
.dg-plano__svg { width: 100%; height: auto; max-height: 220px; margin: 0 auto; overflow: visible; }
.dg-plano__area rect { fill: var(--blanco); stroke: #c3cad0; stroke-width: .35; transition: fill 260ms ease, stroke 260ms ease, stroke-width 260ms ease; }
.dg-plano__nombre { font-family: var(--texto); font-size: 3.2px; font-weight: 600; fill: var(--tinta-2); transition: fill 260ms ease; }
.dg-plano__cuenta { font-family: var(--texto); font-size: 2.45px; font-weight: 600; fill: var(--rojo-tinta); font-variant-numeric: tabular-nums; }
.dg-plano__area[data-marcada] rect { fill: var(--dg-piso-marcado); stroke: rgba(212, 32, 26, .42); }
.dg-plano__area[data-marcada] .dg-plano__nombre { fill: var(--rojo-tinta); }
.dg-plano__area[data-prioridad] rect { stroke: var(--rojo); stroke-width: .95; }
.dg-plano__area[data-prioridad] .dg-plano__nombre { font-weight: 700; }
.dg-plano__svg--mini .dg-plano__area rect { stroke-width: 1.2; }
.dg-plano__svg--mini .dg-plano__area[data-prioridad] rect { stroke-width: 2.4; }

.dg-plano__leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; font-size: .78rem; color: var(--tinta-3); }
.dg-leyenda { display: inline-flex; align-items: center; gap: .4rem; }
.dg-leyenda::before { content: ""; width: 13px; height: 9px; border-radius: 2.5px; }
.dg-leyenda--marcada::before { background: var(--dg-piso-marcado); border: 1px solid rgba(212, 32, 26, .42); }
.dg-leyenda--prioridad::before { background: var(--blanco); border: 1.5px solid var(--rojo); }

.dg-boceto__avance {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.016em;
    line-height: 1.3;
    color: var(--tinta);
    text-wrap: balance;
}
.dg-boceto__avance b { font-weight: 800; }

.dg-bloque { display: grid; gap: .7rem; padding-top: 1.05rem; border-top: 1px solid var(--linea); }
.dg-bloque__titulo { display: flex; align-items: baseline; gap: .5rem; font-size: .96rem; letter-spacing: -.01em; }
.dg-bloque__cuenta { margin-left: auto; font-family: var(--texto); font-size: .82rem; font-weight: 600; letter-spacing: 0; color: var(--tinta-3); }

.dg-piezas, .dg-conexiones { display: grid; gap: .3rem; }
.dg-pieza {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    margin: 0 -.55rem;
    padding: .45rem .55rem;
    border-radius: 10px;
    transition: background-color 900ms ease;
}
.dg-pieza[data-nueva] { background: var(--rojo-piso); transition-duration: 120ms; }
.dg-pieza__check {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--rojo);
    color: #fff;
}
.dg-pieza__check .icono { width: 13px; height: 13px; stroke-width: 3; }
.dg-pieza__texto, .dg-conexion__texto { display: grid; gap: .12rem; min-width: 0; }
.dg-pieza__nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--tinta); }
.dg-pieza__etapa {
    padding: .08rem .5rem;
    border-radius: 99px;
    border: 1px solid rgba(212, 32, 26, .28);
    background: var(--blanco);
    font-size: .74rem;
    font-weight: 600;
    color: var(--rojo-tinta);
}
.dg-pieza__desc, .dg-conexion__trato { font-size: .85rem; line-height: 1.42; color: var(--tinta-2); }

.dg-conexion { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .7rem; align-items: start; padding: .35rem 0; }
.dg-conexion__icono { width: 18px; height: 18px; margin: 2px 0 0 2px; color: var(--tinta-2); }
.dg-conexion__nombre { font-size: .93rem; font-weight: 600; line-height: 1.3; color: var(--tinta); }

.dg-etapa { font-size: .95rem; line-height: 1.5; color: var(--tinta); text-wrap: pretty; }
.dg-etapa b { font-weight: 700; }
.dg-etapa__nota { display: block; margin-top: .3rem; font-size: .82rem; color: var(--tinta-3); }

/* Hueco del boceto: lo que aún no existe va en línea punteada */
.dg-hueco {
    padding: .75rem .9rem;
    border: 1px dashed #bcc4cb;
    border-radius: 10px;
    background: var(--nieve-2);
    font-size: .86rem;
    line-height: 1.45;
    color: var(--tinta-2);
}

.dg-boceto__nota { display: flex; align-items: flex-start; gap: .45rem; font-size: .8rem; line-height: 1.4; color: var(--tinta-3); }
.dg-boceto__nota .icono { width: 15px; height: 15px; margin-top: 1px; }

.dg-boceto__pie {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .85rem .7rem 1.35rem;
    border-top: 1px solid var(--linea);
    background: var(--nieve-2);
}
.dg-boceto__pie p { font-size: .9rem; font-weight: 500; color: var(--tinta-2); }

.dg-impresion { display: none; }

/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */

.dg-exito { display: grid; gap: 1rem; justify-items: start; max-width: 640px; padding-top: .25rem; }
.dg-exito__sello {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--rojo);
    color: #fff;
    box-shadow: 0 8px 22px rgba(212, 32, 26, .24);
}
.dg-exito__sello .icono { width: 26px; height: 26px; stroke-width: 2.5; stroke-dasharray: 24; stroke-dashoffset: 0; animation: dg-trazo 440ms var(--ease-out) 160ms backwards; }
@keyframes dg-trazo { from { stroke-dashoffset: 24; } }
.dg-exito__titulo { max-width: 22ch; font-size: clamp(1.6rem, 2.3vw, 2.1rem); letter-spacing: -.032em; line-height: 1.1; outline: none; }
.dg-exito__titulo:focus, .dg-exito__titulo:focus-visible { outline: none; }
.dg-exito__folio {
    display: inline-flex;
    align-items: baseline;
    gap: .65rem;
    padding: .5rem .9rem;
    border-radius: 10px;
    border: 1px solid var(--linea);
    background: var(--blanco);
    box-shadow: var(--sombra-boton);
    font-size: .86rem;
    color: var(--tinta-2);
}
.dg-exito__folio b { font-family: var(--display); font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; color: var(--tinta); }
.dg-exito__apoyo { max-width: 52ch; }
.dg-exito__subtitulo { margin-top: .9rem; font-size: 1.04rem; letter-spacing: -.012em; }
.dg-siguen { display: grid; gap: 1rem; width: 100%; counter-reset: dg-siguen; }
.dg-siguen li { position: relative; display: grid; gap: .15rem; padding-left: 2.65rem; counter-increment: dg-siguen; }
.dg-siguen li::before {
    content: counter(dg-siguen);
    position: absolute;
    left: 0;
    top: -2px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--tinta);
    background: var(--blanco);
    font-family: var(--display);
    font-size: .82rem;
    font-weight: 700;
}
.dg-siguen b { font-weight: 600; line-height: 1.35; }
.dg-siguen span { font-size: .9rem; line-height: 1.45; color: var(--tinta-2); }
.dg-exito__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.dg-exito__otro { margin: .2rem 0 0 -.8rem; }

/* --------------------------------------------------------------------------
   Escritorio angosto (riel de íconos) y celular
   -------------------------------------------------------------------------- */

@container dg-app (max-width: 860px) {
    .dg-progreso__nombre { font-size: .84rem; }
}

@media (max-width: 899px) {
    /* El módulo vuelve al flujo del documento: sin esto, lo pegajoso no se pega a la ventana. */
    .modulo--completo[data-modulo="diagnostico"] { overflow: visible; }
    html:has(.modulo--completo[data-modulo="diagnostico"]:not([hidden]) .dg-app) {
        scroll-padding-top: calc(var(--barra) + 84px);
        scroll-padding-bottom: calc(var(--pestanas) + 84px + env(safe-area-inset-bottom, 0px));
    }

    .dg-solo-movil { display: inline; }
    .dg-solo-escritorio { display: none; }

    .dg-arriba { gap: 1rem; margin-bottom: 1.1rem; }
    .dg-progreso__item::after { margin: 0 .35rem 0 .1rem; }
    .dg-progreso__paso { padding: .3rem; }
    .dg-progreso__nombre {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .dg-rejilla { display: flex; flex-direction: column; gap: 1.4rem; }
    .dg-pasos { width: 100%; }

    .dg-boceto {
        order: -1;
        position: sticky;
        top: calc(var(--barra) + 8px);
        z-index: 6;
        width: 100%;
        max-height: none;
        box-shadow: var(--sombra);
    }
    .dg-boceto__tira {
        display: flex;
        align-items: center;
        gap: .75rem;
        width: 100%;
        min-height: 58px;
        padding: .5rem .7rem .5rem .6rem;
        text-align: left;
    }
    .dg-boceto__tira .dg-plano__svg--mini { width: 54px; height: auto; flex: none; border-radius: 5px; }
    .dg-boceto__tira-texto { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
    .dg-boceto__tira-texto b { font-family: var(--display); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
    .dg-boceto__tira-texto span { font-size: .84rem; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dg-boceto__tira-ver { display: inline-flex; align-items: center; gap: .15rem; font-size: .86rem; font-weight: 600; color: var(--tinta); }
    .dg-boceto__tira-ver .icono { width: 16px; height: 16px; color: var(--tinta-3); transition: transform 200ms var(--ease-out); }
    .dg-boceto[data-abierto] .dg-boceto__tira-ver .icono { transform: rotate(90deg); }
    .dg-boceto:not([data-abierto]) .dg-boceto__cuerpo,
    .dg-boceto:not([data-abierto]) .dg-boceto__pie { display: none; }
    .dg-boceto[data-abierto] .dg-boceto__cuerpo {
        max-height: calc(100dvh - var(--barra) - var(--pestanas) - 150px);
        border-top: 1px solid var(--linea);
        padding: 1.1rem 1rem 1rem;
    }
    .dg-boceto__pie { padding: .6rem .75rem .6rem 1rem; }

    .dg-pie {
        z-index: 7;
        bottom: calc(var(--pestanas) + env(safe-area-inset-bottom, 0px));
        gap: .5rem;
        margin-top: 1.75rem;
        padding: .6rem 0 .65rem;
    }
    .dg-pie__cuenta { display: none; }
    .dg-pie__atras { width: 44px; padding: 0; }
    .dg-pie__atras span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .dg-pie__atras.dg-invisible { display: none; }
    .dg-pie__wa { display: inline-flex; width: 48px; padding: 0; flex: none; }
    .dg-pie__siguiente { flex: 1 1 auto; min-width: 0; }

    .dg-paso__titulo { scroll-margin-top: calc(var(--barra) + 80px); }
    .dg-arriba, .dg-boceto { scroll-margin-top: calc(var(--barra) + 8px); }
    .dg-envio-error { scroll-margin-bottom: calc(var(--pestanas) + 90px); }

    /* En el cierre, el boceto completo queda abajo, sin pegarse. */
    .dg-app[data-fase="exito"] .dg-boceto { order: 0; position: static; }
    .dg-app[data-fase="exito"] .dg-boceto__tira { display: none; }
    .dg-app[data-fase="exito"] .dg-boceto .dg-boceto__cuerpo,
    .dg-app[data-fase="exito"] .dg-boceto .dg-boceto__pie { display: grid; max-height: none; border-top: 0; }
    .dg-app[data-fase="exito"] .dg-boceto .dg-boceto__pie { display: flex; }
    .dg-exito__acciones .btn { flex: 1 1 100%; }
}

@media (max-width: 420px) {
    .dg-chip { padding-right: .85rem; }
    .dg-opcion { padding-inline: .8rem; }
}

/* --------------------------------------------------------------------------
   Impresión: solo el boceto, limpio
   -------------------------------------------------------------------------- */

@media print {
    @page { margin: 16mm 16mm 18mm; }
    html:has(.modulo--completo[data-modulo="diagnostico"]:not([hidden]) .dg-app),
    html:has(.modulo--completo[data-modulo="diagnostico"]:not([hidden]) .dg-app) body { background: #fff !important; }
    html:has(.modulo--completo[data-modulo="diagnostico"]:not([hidden]) .dg-app) .consola { padding: 0 !important; }
    .modulo--completo[data-modulo="diagnostico"] { overflow: visible !important; height: auto !important; }
    .modulo--completo[data-modulo="diagnostico"] .modulo__interior { padding: 0 !important; max-width: none !important; }
    .dg-arriba, .dg-pasos, .dg-boceto__tira, .dg-boceto__pie, .dg-anuncio, .dg-hueco { display: none !important; }
    .dg-rejilla { display: block !important; }
    .dg-boceto {
        position: static !important;
        display: block !important;
        max-height: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    .dg-boceto__cuerpo { display: grid !important; max-height: none !important; overflow: visible !important; padding: 0 !important; gap: 14px; border: 0 !important; }
    .dg-impresion { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid #c3cad0; }
    .dg-impresion img { height: 24px; width: auto; }
    .dg-impresion p { display: grid; text-align: right; font-size: 10pt; color: var(--tinta-2); }
    .dg-impresion p b { font-family: var(--display); font-size: 12pt; color: var(--tinta); }
    .dg-impresion--pie { display: block; padding: 10px 0 0; border-top: 1px solid #c3cad0; border-bottom: 0; font-size: 9pt; color: var(--tinta-2); }
    .dg-boceto__titulo { font-size: 18pt; }
    .dg-plano__tablero { background: #fff; border-color: #dfe3e7; }
    .dg-plano__svg { max-height: 70mm; }
    .dg-pieza[data-nueva] { background: none; }
    .dg-pieza, .dg-conexion, .dg-bloque { break-inside: avoid; }
    .dg-pieza__check, .dg-plano__area rect { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}