/* ==========================================================================
   PROSPECTOS — .dlg-dd. Variante de .dlg-form con el handoff hifi del dueño.
   Todo bajo .dlg-form.dlg-dd. Archivo 12 de 12. Ver §6.13.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1 — Cascaron: superficie, cabecera, cuerpo y pie. Lo comparten las tres
   vistas del handoff (formulario, resultado y detalle).
   -------------------------------------------------------------------------- */
/* COMPUESTO: las dos clases caen en el mismo nodo .mud-dialog. Ver §8, trampa 5. */
/* Solo el ancho es suyo: el cromo lo pone .dlg-form. Ver §6.2. */
.mud-dialog.dlg-form.dlg-dd{
    width: 100%;
    max-width: 1040px;
}
/* El cuerpo es el MudForm: no trae display propio, y 22px queda fuera de la
   escala de MudStack. */
.dlg-form.dlg-dd .dd-body{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* --------------------------------------------------------------------------
   §2 — Encabezado de seccion. Este handoff no dibuja la linea: DlgSection
   se compone con Line="false". Ver §6.2.4.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dlg-sec{
    margin: 0;
    gap: 10px;
}
.dlg-form.dlg-dd .dlg-sec__t{
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--dc-text-2);
}
.dlg-form.dlg-dd .dlg-sec__hint{
    margin: 0;
    font-size: 12.5px;
    color: var(--dc-text-muted);
}
/* MudChip trae 32px de alto y margen propio: hay que apagarlos. */
.dlg-form.dlg-dd .dlg-sec__count.mud-chip{
    height: auto;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 2px 9px;
    border: 0;
    border-radius: 999px;
    background: var(--dc-fill);
    color: var(--dc-navy);
    font-size: 11.5px;
    font-weight: 700;
}
.dlg-form.dlg-dd .dlg-sec__count .mud-chip-content{
    height: auto;
    padding: 0;
}

/* --------------------------------------------------------------------------
   §3 — Grillas del handoff. MudGrid trae margen negativo y MudStack pisa el
   display:grid con !important, asi que las aplica un MudElement. Ver §6.2.4.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-grid-id{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 12px;
}
.dlg-form.dlg-dd .dd-grid-name{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.dlg-form.dlg-dd .dd-grid-cards{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.dlg-form.dlg-dd .dd-grid-panel{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
/* Cada bloque del cuerpo es una columna; el segmentado abre 8px, el resto 12px. */
.dlg-form.dlg-dd .dd-block{
    gap: 12px;
}
.dlg-form.dlg-dd .dd-block--seg{
    gap: 8px;
}

/* --------------------------------------------------------------------------
   §4 — Segmentado de tipo de entidad. MudToggleGroup renderiza sus items
   como > button, igual que .seg y .dc-chips. Ver §6.10 y §6.2.4.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-seg.mud-toggle-group{
    display: inline-flex;
    align-self: flex-start;
    width: auto;
    height: auto;
    gap: 4px;
    padding: 4px;
    border: 0;
    border-radius: 10px;
    background: var(--dc-fill);
    overflow: visible;
}
.dlg-form.dlg-dd .dd-seg > button{
    min-width: 0;
    height: auto;
    padding: 9px 18px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--dc-text-2);
    font-size: 13.5px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.dlg-form.dlg-dd .dd-seg > button > .mud-button-label{
    gap: 8px;
}
.dlg-form.dlg-dd .dd-seg > button.dd-seg__on{
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
    box-shadow: 0 2px 6px rgba(29, 61, 102, .25);
}
.dlg-form.dlg-dd .dd-seg .mud-icon-root{
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   §5 — Campos. Misma tecnica que .dlg-client .fld (§6.2.4): la etiqueta no
   flota nunca y la altura sale del padding, no de --bl-h-field.
   -------------------------------------------------------------------------- */
/* Campo relleno FUERA de panel: sin borde, 56px de alto intrinseco. */
.dlg-form.dlg-dd .fld{
    margin: 0;
}
.dlg-form.dlg-dd .fld .mud-input.mud-input-filled{
    min-height: 58px;
    border: 0;
    border-radius: 8px;
    background: var(--dc-fill);
}
.dlg-form.dlg-dd .fld .mud-input.mud-input-filled:hover{
    background: var(--dc-fill);
}
.dlg-form.dlg-dd .fld .mud-input.mud-input-filled .mud-input-slot:not(textarea){
    padding: 28px 14px 9px;
    font-size: 15px;
    font-weight: 400;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .fld .mud-input-slot::placeholder{
    color: var(--dc-placeholder);
    opacity: 1;
}
/* La etiqueta no flota nunca: `ShrinkLabel` la deja arriba con el campo vacio. */
.dlg-form.dlg-dd .fld label.mud-input-label-filled.mud-input-label-margin-dense,
.dlg-form.dlg-dd .fld .mud-shrink ~ label.mud-input-label-filled.mud-input-label-margin-dense,
.dlg-form.dlg-dd .fld .mud-input:focus-within ~ label.mud-input-label-filled.mud-input-label-margin-dense{
    transform: translate(14px, 9px);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dc-text-2);
}
/* Foco: contorno navy interno de 1.5px, el estandar del resto de la app. Sin el
   anillo externo propio, que apilado con este se veia doble. */
.dlg-form.dlg-dd .fld .mud-input.mud-input-filled:focus-within{
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-primary);
    outline: none;
    border-radius: 8px;
}
/* La etiqueta se pone navy al enfocar, como en los demas formularios. */
.dlg-form.dlg-dd .fld .mud-input:focus-within ~ label.mud-input-label-filled.mud-input-label-margin-dense{
    color: var(--mud-palette-primary);
}
/* Campo relleno DENTRO del panel de alta: blanco, con borde y mas compacto. */
.dlg-form.dlg-dd .fld--outline .mud-input.mud-input-filled{
    min-height: 52px;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line-field);
}
.dlg-form.dlg-dd .fld--outline .mud-input.mud-input-filled:hover{
    background: var(--dc-surface);
}
.dlg-form.dlg-dd .fld--outline .mud-input.mud-input-filled .mud-input-slot:not(textarea){
    padding: 24px 12px 8px;
    font-size: 14.5px;
}
.dlg-form.dlg-dd .fld--outline label.mud-input-label-filled.mud-input-label-margin-dense,
.dlg-form.dlg-dd .fld--outline .mud-shrink ~ label.mud-input-label-filled.mud-input-label-margin-dense,
.dlg-form.dlg-dd .fld--outline .mud-input:focus-within ~ label.mud-input-label-filled.mud-input-label-margin-dense{
    transform: translate(12px, 8px);
    font-size: 11px;
}
/* El label ya trae su asterisco; MudBlazor agrega otro por ::after. Apagamos el duplicado. */
.dlg-form.dlg-dd .fld label.mud-input-label::after{
    content: none;
}
/* El adorno hereda el tono de la etiqueta salvo que la variante diga otra cosa. */
.dlg-form.dlg-dd .fld .mud-input-adornment{
    color: var(--dc-text-2);
}
/* MudBlazor tira el boton del adorno con un margen negativo y lo pegaba al borde;
   lo anulamos para dejarlo a 14px como el mock. */
.dlg-form.dlg-dd .fld .mud-input-adornment .mud-icon-button{
    margin-right: 0;
    margin-inline-end: 0;
}
/* El icono queda a 14px del borde en todo campo salvo el de busqueda (ya lo fija). */
.dlg-form.dlg-dd .fld:not(.fld--search) .mud-input.mud-input-filled.mud-input-adorned-end{
    padding-right: 14px;
    padding-inline-end: 14px;
}
/* Chevron de select y autocomplete: MudBlazor lo saca en plato; el mock es glifo de 18px sin plato. */
.dlg-form.dlg-dd .fld:not(.fld--search):not(.fld--date) .mud-input-adornment .mud-icon-button{
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    background: none;
    border-radius: 0;
}
.dlg-form.dlg-dd .fld:not(.fld--search):not(.fld--date) .mud-input-adornment .mud-icon-root{
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--dc-text-2);
}
/* Fecha: un solo icono, navy y sin plato, como el `stroke` del mock. */
.dlg-form.dlg-dd .fld--date .mud-input-adornment .mud-icon-button{
    padding: 0;
    background: none;
}
.dlg-form.dlg-dd .fld--date .mud-input-adornment .mud-icon-root{
    font-size: 17px;
    width: 17px;
    height: 17px;
    color: var(--dc-navy);
}
.dlg-form.dlg-dd .fld--outline.fld--date .mud-input-adornment .mud-icon-root{
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Boton de busqueda del documento: plato de 34px que se invierte al pasar. */
.dlg-form.dlg-dd .fld--search .mud-input.mud-input-filled.mud-input-adorned-end{
    padding-right: 14px;
    padding-inline-end: 14px;
}
.dlg-form.dlg-dd .fld--search .mud-input.mud-input-filled .mud-input-slot:not(textarea){
    padding-right: 0;
}
.dlg-form.dlg-dd .fld--search .mud-input-adornment{
    height: auto;
    max-height: none;
    margin-left: 10px;
    margin-inline-start: 10px;
}
.dlg-form.dlg-dd .fld--search .mud-input-adornment .mud-icon-button{
    width: 34px;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    align-self: center;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 7px;
    background: var(--dc-surface);
    color: var(--dc-navy);
    transition: background-color .15s ease, color .15s ease;
}
.dlg-form.dlg-dd .fld--search .mud-input-adornment .mud-icon-button:hover{
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
}
.dlg-form.dlg-dd .fld--search .mud-input-adornment .mud-icon-root{
    font-size: 16px;
    width: 16px;
    height: 16px;
}
/* Variante del panel: 30px, radio 6 y fondo relleno en vez de blanco. */
.dlg-form.dlg-dd .fld--outline.fld--search .mud-input.mud-input-filled.mud-input-adorned-end{
    padding-right: 12px;
    padding-inline-end: 12px;
}
.dlg-form.dlg-dd .fld--outline.fld--search .mud-input-adornment{
    margin-left: 8px;
    margin-inline-start: 8px;
}
.dlg-form.dlg-dd .fld--outline.fld--search .mud-input-adornment .mud-icon-button{
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--dc-fill);
}
.dlg-form.dlg-dd .fld--outline.fld--search .mud-input-adornment .mud-icon-root{
    font-size: 14px;
    width: 14px;
    height: 14px;
}
/* Ayuda bajo la grilla de identificacion: una linea, no un HelperText. */
.dlg-form.dlg-dd .dd-hint{
    gap: 6px;
    font-size: 12.5px;
    color: var(--dc-text-muted);
}
.dlg-form.dlg-dd .dd-hint .mud-icon-root{
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* --------------------------------------------------------------------------
   §6 — Socios: ficha, celda de alta y panel inline. Misma familia de handoff
   que .dc-contact / .dc-add-tile / .dc-panel--contact. Ver §6.2.4.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-card{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--dc-line-card);
    border-radius: 10px;
    background: var(--dc-surface);
}
.dlg-form.dlg-dd .dd-card__avatar{
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
    font-size: 14px;
    font-weight: 700;
}
.dlg-form.dlg-dd .dd-card__body{
    flex: 1;
    min-width: 0;
    gap: 3px;
}
.dlg-form.dlg-dd .dd-card__name{
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dlg-form.dlg-dd .dd-card__line{
    margin: 0;
    font-size: 12.5px;
    color: var(--dc-text-muted);
}
/* La primera linea de datos abre otros 3px bajo la pastilla de tipo. */
.dlg-form.dlg-dd .dd-card__line--doc{
    margin-top: 3px;
}
.dlg-form.dlg-dd .dd-pill.mud-chip{
    align-self: flex-start;
    height: auto;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 2px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--dc-fill);
    color: var(--dc-navy);
    font-size: 12px;
    font-weight: 700;
}
.dlg-form.dlg-dd .dd-pill .mud-chip-content{
    height: auto;
    padding: 0;
}
.dlg-form.dlg-dd .dd-trash.mud-icon-button{
    padding: 2px 4px;
    background: none;
    color: var(--dc-placeholder);
    transition: color .15s ease;
}
.dlg-form.dlg-dd .dd-trash.mud-icon-button:hover{
    background: none;
    color: var(--dc-error);
}
.dlg-form.dlg-dd .dd-trash .mud-icon-root{
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Celda "Añadir socio": es un MudButton, asi que hay que aplanarlo. */
.dlg-form.dlg-dd .dd-add-tile.mud-button-root{
    min-height: 110px;
    padding: 0;
    border: 1.5px dashed var(--dc-line-dash);
    border-radius: 10px;
    background: var(--dc-panel);
    color: var(--dc-navy);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.dlg-form.dlg-dd .dd-add-tile.mud-button-root:hover{
    border-color: var(--dc-navy);
    background: var(--dc-hover);
}
.dlg-form.dlg-dd .dd-add-tile .mud-button-label{
    flex-direction: column;
    gap: 6px;
}
.dlg-form.dlg-dd .dd-add-tile__plus{
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dc-fill);
}
.dlg-form.dlg-dd .dd-add-tile__plus .mud-icon-root{
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Panel de alta inline: solido y 2px mas corto abajo, como el alta de contacto. */
.dlg-form.dlg-dd .dd-panel{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px 16px;
    border: 1px solid var(--dc-line-dash);
    border-radius: 12px;
    background: var(--dc-panel);
}
.dlg-form.dlg-dd .dd-panel__title{
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-panel__cancel.mud-button-root{
    min-height: 0;
    padding: 0;
    background: none;
    color: var(--dc-text-muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

/* Chips de tipo de socio: mismo aplanado que .dd-seg, con forma de pastilla. */
.dlg-form.dlg-dd .dd-chips.mud-toggle-group{
    display: flex;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}
.dlg-form.dlg-dd .dd-chips > button{
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 6px 14px;
    border: 1.5px solid var(--dc-line-dash);
    /* Mismo apagon de borde de MudToggleItem que en .dd-dec. */
    border-style: solid !important;
    border-radius: 999px;
    background: var(--dc-surface);
    color: var(--dc-text-2);
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dlg-form.dlg-dd .dd-chips > button.dd-chips__on{
    border-color: var(--dc-navy);
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
}

/* La validacion del borrador se responde en linea, nunca con un snackbar. */
.dlg-form.dlg-dd .dd-error{
    margin: 0 auto 0 0;
    font-size: 12.5px;
    color: var(--dc-error);
}
/* Boton primario chico de panel: mas apretado que el del pie. */
.dlg-form.dlg-dd .dd-btn.mud-button-root{
    min-height: 0;
    padding: 11px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color .15s ease;
}
.dlg-form.dlg-dd .dd-btn.mud-button-root:hover{
    background: var(--dc-navy-hover);
}

/* --------------------------------------------------------------------------
   §7 — Pastillas del resultado. El mock dibuja ocho rellenos distintos, asi
   que cada variante trae el suyo. Mismo aplanado de MudChip que .dd-pill.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-chip.mud-chip{
    height: auto;
    min-height: 0;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    font-weight: 700;
    white-space: nowrap;
}
.dlg-form.dlg-dd .dd-chip .mud-chip-content{
    height: auto;
    padding: 0;
    gap: 6px;
}
.dlg-form.dlg-dd .dd-chip .mud-icon-root{
    font-size: 13px;
    width: 13px;
    height: 13px;
}
/* Tipo de entidad en la ficha resumen: contorno navy. */
.dlg-form.dlg-dd .dd-chip--type.mud-chip{
    padding: 5px 12px;
    border: 1.5px solid var(--dc-navy);
    color: var(--dc-navy);
    font-size: 12px;
}
/* Estado del flujo. Preview y Aceptado los dibuja el mock; Enviado y Rechazado
   son variantes condicionadas con la misma caja exterior. */
.dlg-form.dlg-dd .dd-chip--status.mud-chip{
    padding: 6px 12px;
    background: var(--dc-fill);
    color: var(--dc-text-2);
    font-size: 12px;
}
.dlg-form.dlg-dd .dd-chip--status-ok.mud-chip{
    background: var(--dd-ok-solid);
    color: var(--dd-ok-solid-ink);
}
.dlg-form.dlg-dd .dd-chip--status-sent.mud-chip{
    padding: 4.5px 10.5px;
    border: 1.5px solid var(--dc-navy);
    background: none;
    color: var(--dc-navy);
}
.dlg-form.dlg-dd .dd-chip--status-off.mud-chip{
    background: var(--dc-error);
    color: var(--dd-ok-solid-ink);
}
/* Socio y "Registrado como cliente": contorno gris. */
.dlg-form.dlg-dd .dd-chip--grey.mud-chip{
    padding: 4px 10px;
    border: 1.5px solid var(--dc-line-dash);
    color: var(--dc-text-2);
    font-size: 12px;
}
/* Decision del analista en la cabecera del screening. */
.dlg-form.dlg-dd .dd-chip--navy.mud-chip{
    padding: 4px 10px;
    border: 1.5px solid var(--dc-navy);
    color: var(--dc-navy);
    font-size: 12px;
}
.dlg-form.dlg-dd .dd-chip--risk.mud-chip{
    padding: 5px 11px;
    background: var(--dd-ok-solid);
    color: var(--dd-ok-solid-ink);
    font-size: 12px;
}
/* Riesgo medio no lo dibuja el mock: familia warn del lenguaje. Ver §6.13. */
.dlg-form.dlg-dd .dd-chip--risk-mid.mud-chip{
    background: var(--status-warn-fg);
}
.dlg-form.dlg-dd .dd-chip--risk-high.mud-chip{
    background: var(--dc-error);
}
/* External ID, Nacionalidad y Genero del resultado aproximado. */
.dlg-form.dlg-dd .dd-chip--meta.mud-chip{
    padding: 5px 11px;
    background: var(--dc-fill);
    color: var(--dc-text-2);
    font-size: 12px;
}
.dlg-form.dlg-dd .dd-chip__s{
    font: inherit;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-chip--entity.mud-chip{
    padding: 4px 11px;
    border: 1.5px solid var(--dc-navy);
    color: var(--dc-navy);
    font-size: 12px;
}
.dlg-form.dlg-dd .dd-chip--prog.mud-chip{
    padding: 5px 12px;
    border: 1.5px solid var(--dc-error);
    color: var(--dc-error);
    font-size: 12px;
    letter-spacing: .3px;
}
.dlg-form.dlg-dd .dd-chip--live.mud-chip{
    padding: 4px 10px;
    background: var(--dd-ok-solid);
    color: var(--dd-ok-solid-ink);
    font-size: 11.5px;
}
.dlg-form.dlg-dd .dd-chip--live .mud-chip-content{
    gap: 5px;
}
.dlg-form.dlg-dd .dd-chip--live .mud-icon-root{
    font-size: 11px;
    width: 11px;
    height: 11px;
}
/* "Inactivo": el mock nunca lo dibuja, misma caja que Activo en contorno. */
.dlg-form.dlg-dd .dd-chip--idle.mud-chip{
    padding: 2.5px 8.5px;
    border: 1.5px solid var(--dc-line-dash);
    background: var(--dc-surface);
    color: var(--dc-text-2);
    font-size: 11.5px;
}
.dlg-form.dlg-dd .dd-chip--alias.mud-chip{
    padding: 3px 10px;
    border: 1.5px solid var(--dc-line-dash);
    background: var(--dc-surface);
    color: var(--dc-text-2);
    font-size: 11.5px;
}
.dlg-form.dlg-dd .dd-chip--alias-on.mud-chip{
    border-color: var(--dd-ok-solid);
    background: var(--dd-ok-solid);
    color: var(--dd-ok-solid-ink);
}
/* Lista consultada: el punto de 16px se pega al borde izquierdo. */
.dlg-form.dlg-dd .dd-chip--src.mud-chip{
    padding: 4px 10px 4px 6px;
    border: 1px solid var(--dc-line-field);
    background: var(--dc-surface);
    color: var(--dc-text-2);
    font-size: 12px;
}
.dlg-form.dlg-dd .dd-src__dot.mud-avatar{
    width: 16px;
    height: 16px;
    margin: 0;
    background: var(--dc-line-dash);
    color: var(--dc-navy-ink);
}
.dlg-form.dlg-dd .dd-src__dot--on.mud-avatar{
    background: var(--dc-navy);
}
.dlg-form.dlg-dd .dd-src__dot .mud-icon-root{
    font-size: 10px;
    width: 10px;
    height: 10px;
}
.dlg-form.dlg-dd .dd-src__n{
    color: var(--dc-placeholder);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   §8 — Ficha resumen: identidad, tira de metadatos y listas consultadas.
   El radio se recorta en el contenedor para que los filetes internos calcen.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-sum.mud-paper{
    border: 1px solid var(--dc-line-card);
    border-radius: 12px;
    background: var(--dc-surface);
    overflow: hidden;
}
.dlg-form.dlg-dd .dd-sum__split{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
}
.dlg-form.dlg-dd .dd-sum__main{
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dlg-form.dlg-dd .dd-sum__id{
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
}
.dlg-form.dlg-dd .dd-sum__disc.mud-avatar{
    width: 46px;
    height: 46px;
    background: var(--dc-fill);
    color: var(--dc-navy);
}
.dlg-form.dlg-dd .dd-sum__disc .mud-icon-root{
    font-size: 22px;
    width: 22px;
    height: 22px;
}
.dlg-form.dlg-dd .dd-sum__who{
    flex: 1;
    min-width: 180px;
    gap: 2px;
}
.dlg-form.dlg-dd .dd-sum__k{
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dc-text-2);
}
.dlg-form.dlg-dd .dd-sum__n{
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.1px;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-sum__chips{
    gap: 8px;
    flex-wrap: wrap;
}
/* La tira crece para empujar el panel de riesgo a toda la altura de la ficha. */
.dlg-form.dlg-dd .dd-meta{
    display: grid;
    grid-template-columns: minmax(200px, 1.4fr) minmax(150px, 1fr) minmax(110px, .8fr);
    flex: 1;
    border-top: 1px solid var(--dc-line-card);
    background: var(--dc-panel);
}
.dlg-form.dlg-dd .dd-meta__c{
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 14px 20px;
    border-right: 1px solid var(--dc-line-card);
}
.dlg-form.dlg-dd .dd-meta__c:last-child{
    border-right: 0;
}
.dlg-form.dlg-dd .dd-meta__k{
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dc-text-muted);
}
.dlg-form.dlg-dd .dd-meta__v{
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dc-text);
    white-space: nowrap;
}
/* El Reference ID no se trunca nunca: parte de linea antes que perder digitos. */
.dlg-form.dlg-dd .dd-meta__v--id{
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    white-space: normal;
}
.dlg-form.dlg-dd .dd-meta__v--empty{
    color: var(--dc-placeholder);
}
.dlg-form.dlg-dd .dd-lists{
    gap: 10px;
    padding: 14px 20px 16px;
    border-top: 1px solid var(--dc-line-card);
}
.dlg-form.dlg-dd .dd-lists__k{
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dc-text-muted);
}
.dlg-form.dlg-dd .dd-lists__row{
    gap: 8px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   §9 — Panel de riesgo. Se invierte entero en oscuro: nada aqui puede pintar
   un blanco literal. Ver §2.5 y §6.13.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-risk{
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
    text-align: center;
}
/* Mayusculas por CSS, como .dlg-sec__t: el rotulo se escribe en caja normal. */
.dlg-form.dlg-dd .dd-risk__k{
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--dd-on-navy-muted);
}
/* La caja mide 104 y el anillo 96.8, que es donde r=20 del viewBox 44 cae en 44px. */
.dlg-form.dlg-dd .dd-ring{
    position: relative;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
}
/* La pista la dibuja el borde: MudProgressCircular no trae circulo de fondo. */
.dlg-form.dlg-dd .dd-ring::before{
    content: "";
    position: absolute;
    inset: 3.6px;
    border: 9px solid var(--dd-ring-track);
    border-radius: 50%;
}
.dlg-form.dlg-dd .dd-ring .mud-progress-circular{
    width: 96.8px;
    height: 96.8px;
}
.dlg-form.dlg-dd .dd-ring .mud-progress-circular-svg{
    overflow: visible;
}
/* 4.0909 unidades del viewBox son los 9px de trazo del mock. */
.dlg-form.dlg-dd .dd-ring .mud-progress-circular-circle{
    stroke: var(--dd-ring-low);
    stroke-width: 4.0909;
}
.dlg-form.dlg-dd .dd-ring--mid .mud-progress-circular-circle{
    stroke: var(--dd-ring-mid);
}
.dlg-form.dlg-dd .dd-ring--high .mud-progress-circular-circle{
    stroke: var(--dd-ring-high);
}
.dlg-form.dlg-dd .dd-ring .mud-progress-circular-percentage{
    flex-direction: column;
    gap: 0;
}
.dlg-form.dlg-dd .dd-ring__n{
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}
.dlg-form.dlg-dd .dd-ring__cap{
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--dd-on-navy-muted);
}
.dlg-form.dlg-dd .dd-badge.mud-chip{
    height: auto;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--dd-ok-solid);
    color: var(--dd-ok-solid-ink);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.dlg-form.dlg-dd .dd-badge .mud-chip-content{
    height: auto;
    padding: 0;
    gap: 6px;
}
.dlg-form.dlg-dd .dd-badge .mud-icon-root{
    font-size: 13px;
    width: 13px;
    height: 13px;
}
.dlg-form.dlg-dd .dd-badge--mid.mud-chip{
    background: var(--status-warn-fg);
}
.dlg-form.dlg-dd .dd-badge--high.mud-chip{
    background: var(--dc-error);
}
.dlg-form.dlg-dd .dd-risk__note{
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--dd-on-navy-muted);
}

/* --------------------------------------------------------------------------
   §10 — Acordeon de screenings. Cada panel es una ficha suelta, asi que se
   apagan el margen y los filetes que MudBlazor pone entre paneles.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-acc.mud-expansion-panels{
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 0;
    background: none;
}
.dlg-form.dlg-dd .dd-acc .mud-expand-panel{
    margin: 0;
    border: 1px solid var(--dc-line-card);
    border-radius: 12px;
    background: var(--dc-surface);
    overflow: hidden;
    transition: none;
}
.dlg-form.dlg-dd .dd-acc .mud-expand-panel-header{
    gap: 14px;
    flex-wrap: wrap;
    min-height: 0;
    padding: 14px 18px;
    background: var(--dc-surface);
    transition: background-color .15s ease;
}
.dlg-form.dlg-dd .dd-acc .mud-expand-panel-header:hover{
    background: var(--dc-panel);
}
/* La rotacion del galon ya la trae MudBlazor: -180deg es el mismo giro. */
.dlg-form.dlg-dd .dd-acc .mud-expand-panel-icon{
    color: var(--dc-text-muted);
}
.dlg-form.dlg-dd .dd-acc .mud-expand-panel-icon .mud-icon-root{
    font-size: 18px;
    width: 18px;
    height: 18px;
}
.dlg-form.dlg-dd .dd-acc .mud-expand-panel-content{
    padding: 18px;
    border-top: 1px solid var(--dc-line-card);
    background: var(--dc-panel);
}
.dlg-form.dlg-dd .dd-sc__head{
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
}
.dlg-form.dlg-dd .dd-sc__disc.mud-avatar{
    width: 36px;
    height: 36px;
    background: var(--dc-fill);
    color: var(--dc-navy);
}
.dlg-form.dlg-dd .dd-sc__disc .mud-icon-root{
    font-size: 17px;
    width: 17px;
    height: 17px;
}
.dlg-form.dlg-dd .dd-sc__who{
    flex: 1;
    min-width: 180px;
    gap: 1px;
}
.dlg-form.dlg-dd .dd-sc__n{
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-sc__doc{
    margin: 0;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--dc-text-muted);
}
.dlg-form.dlg-dd .dd-sc__chips{
    gap: 8px;
    flex-wrap: wrap;
}
.dlg-form.dlg-dd .dd-sc__count{
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dc-text-2);
    white-space: nowrap;
}
.dlg-form.dlg-dd .dd-sc__count-disc.mud-avatar{
    width: 26px;
    height: 26px;
    background: var(--dc-fill);
    color: var(--dc-navy);
    font-size: 12px;
    font-weight: 700;
}
.dlg-form.dlg-dd .dd-sc__body{
    gap: 14px;
}

/* --------------------------------------------------------------------------
   §11 — Cuerpo del screening: aviso compacto, datos del consultado y ficha
   del resultado mas aproximado.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-warn{
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1.5px solid var(--dc-error);
    border-radius: 10px;
    background: var(--dd-error-wash);
    font-size: 13px;
    font-weight: 600;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-warn__disc.mud-avatar{
    width: 22px;
    height: 22px;
    background: var(--dc-error);
    color: var(--dd-ok-solid-ink);
}
.dlg-form.dlg-dd .dd-warn__disc .mud-icon-root{
    font-size: 12px;
    width: 12px;
    height: 12px;
}
.dlg-form.dlg-dd .dd-card2.mud-paper{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid var(--dc-line-card);
    border-radius: 10px;
    background: var(--dc-surface);
}
.dlg-form.dlg-dd .dd-facts{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 18px;
}
.dlg-form.dlg-dd .dd-fact{
    gap: 1px;
    min-width: 0;
}
.dlg-form.dlg-dd .dd-fact__k{
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--dc-text-muted);
}
.dlg-form.dlg-dd .dd-fact__v{
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-match.mud-paper{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--dc-line-card);
    border-radius: 10px;
    background: var(--dc-surface);
}
.dlg-form.dlg-dd .dd-match__top{
    gap: 14px;
    flex-wrap: wrap;
}
.dlg-form.dlg-dd .dd-match__left{
    flex: 1;
    min-width: 240px;
    gap: 3px;
}
.dlg-form.dlg-dd .dd-match__k{
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dc-text-2);
}
.dlg-form.dlg-dd .dd-match__line{
    gap: 10px;
    flex-wrap: wrap;
}
.dlg-form.dlg-dd .dd-match__n{
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.1px;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-match__chips{
    gap: 8px;
    flex-wrap: wrap;
    align-self: flex-start;
}
/* Las dos columnas de abajo abren distinto a proposito: 10px y 6px. */
.dlg-form.dlg-dd .dd-match__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--dd-line-inner);
}
.dlg-form.dlg-dd .dd-col{
    gap: 10px;
}
.dlg-form.dlg-dd .dd-col--alias{
    gap: 6px;
}
.dlg-form.dlg-dd .dd-col__row{
    gap: 8px;
    flex-wrap: wrap;
}
.dlg-form.dlg-dd .dd-empty{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--dc-placeholder);
}
.dlg-form.dlg-dd .dd-empty--alias{
    padding-top: 4px;
}
/* Toda fila de alias lleva filete, la ultima incluida: el mock no lo resetea. */
.dlg-form.dlg-dd .dd-alias{
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dd-line-inner);
}
.dlg-form.dlg-dd .dd-alias__n{
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dc-text);
}
/* Lista de aliases: filas contiguas separadas por su filete. Con mas de 3 la
   columna hace scroll en vez de crecer (regla del duenno). */
.dlg-form.dlg-dd .dd-alias-list{
    display: flex;
    flex-direction: column;
}
.dlg-form.dlg-dd .dd-alias-list--scroll{
    max-height: 132px;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   §12 — Barra de revision. La columna izquierda lleva similitud, su barra y el
   tipo de coincidencia; el proveedor ya manda el score.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-rev{
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 16px 20px;
    border-radius: 10px;
    background: var(--dc-fill);
}
.dlg-form.dlg-dd .dd-rev__col{
    gap: 8px;
    min-width: 0;
}
/* Similitud: fila label + porcentaje y barra de 6px (navy; roja en riesgo alto). */
.dlg-form.dlg-dd .dd-rev__sim{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12.5px;
}
.dlg-form.dlg-dd .dd-rev__sim-k{
    color: var(--dc-text-2);
    font-weight: 600;
}
.dlg-form.dlg-dd .dd-rev__sim-v{
    font-weight: 800;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-rev__bar.mud-progress-linear{
    height: 6px;
    border-radius: 3px;
    background: var(--dc-surface);
}
.dlg-form.dlg-dd .dd-rev__bar .mud-progress-linear-bar{
    background: var(--dc-navy);
}
.dlg-form.dlg-dd .dd-rev__bar--high .mud-progress-linear-bar{
    background: var(--dc-error);
}
.dlg-form.dlg-dd .dd-rev__type{
    margin: 0;
    font-size: 12px;
    color: var(--dc-text-muted);
}
.dlg-form.dlg-dd .dd-rev__type strong{
    font: inherit;
    font-weight: 700;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-rev__desc{
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--dc-text-muted);
}
.dlg-form.dlg-dd .dd-rev__k{
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dc-text-2);
}
.dlg-form.dlg-dd .dd-rev__row{
    gap: 10px;
    flex-wrap: wrap;
}
/* Los dos botones son un MudToggleGroup en modo ToggleSelection: volver a
   pulsar la opcion activa la deselecciona, como el mock. */
.dlg-form.dlg-dd .dd-dec.mud-toggle-group{
    display: flex;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}
.dlg-form.dlg-dd .dd-dec > button{
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 9px 14px;
    border: 1.5px solid var(--dc-line-dash);
    /* MudBlazor apaga el borde del toggle con !important: hay que ganarle. */
    border-style: solid !important;
    border-radius: 8px;
    background: var(--dc-surface);
    color: var(--dc-text-2);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dlg-form.dlg-dd .dd-dec > button > .mud-button-label{
    gap: 8px;
}
/* El glifo de radio se dibuja en CSS con currentColor: se invierte solo. */
.dlg-form.dlg-dd .dd-dec > button > .mud-button-label::before{
    content: "";
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.dlg-form.dlg-dd .dd-dec > button.dd-dec__on{
    border-color: var(--dc-navy);
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
}
.dlg-form.dlg-dd .dd-dec > button.dd-dec__on > .mud-button-label::before{
    background-image: radial-gradient(circle, currentColor 0 3px, transparent 3px);
}
/* Caso decidido: el mock los pinta a contraste pleno. MudBlazor los grisa al
   deshabilitar; les devolvemos el color sin reactivar el click. */
.dlg-form.dlg-dd .dd-dec > button:disabled,
.dlg-form.dlg-dd .dd-dec > button.mud-disabled{
    color: var(--dc-text-2) !important;
    background: var(--dc-surface) !important;
    border-color: var(--dc-line-dash) !important;
    opacity: 1 !important;
}
.dlg-form.dlg-dd .dd-dec > button.dd-dec__on:disabled,
.dlg-form.dlg-dd .dd-dec > button.dd-dec__on.mud-disabled{
    color: var(--dc-navy-ink) !important;
    background: var(--dc-navy) !important;
    border-color: var(--dc-navy) !important;
}
/* MudText trae su propia tipografia: dentro de un boton hereda la del boton. */
.dlg-form.dlg-dd .dd-seg .mud-typography,
.dlg-form.dlg-dd .dd-chips .mud-typography,
.dlg-form.dlg-dd .dd-dec .mud-typography{
    font: inherit;
    letter-spacing: inherit;
}
/* Nota de justificacion: hermana de los botones dentro de la misma fila. */
.dlg-form.dlg-dd .dd-note{
    flex: 1;
    min-width: 180px;
    margin: 0;
}
.dlg-form.dlg-dd .dd-note .mud-input.mud-input-filled{
    min-height: 0;
    border: 1px solid var(--dc-line-field);
    border-radius: 8px;
    background: var(--dc-surface);
}
.dlg-form.dlg-dd .dd-note .mud-input.mud-input-filled:hover{
    background: var(--dc-surface);
}
.dlg-form.dlg-dd .dd-note .mud-input.mud-input-filled .mud-input-slot:not(textarea){
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-note .mud-input-slot::placeholder{
    color: var(--dc-placeholder);
    opacity: 1;
}
.dlg-form.dlg-dd .dd-note .mud-input.mud-input-filled:focus-within{
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-primary);
    outline: none;
}

/* --------------------------------------------------------------------------
   §13 — Pie del resultado: contador de screenings revisados.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-foot{
    gap: 14px;
    flex-wrap: wrap;
}
/* El grupo de la derecha abre 10px, no 14: el mock los separa a proposito. */
.dlg-form.dlg-dd .dd-foot--r{
    gap: 10px;
}
.dlg-form.dlg-dd .dd-count{
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dc-text-muted);
    white-space: nowrap;
}
.dlg-form.dlg-dd .dd-count__dot.mud-avatar{
    width: 8px;
    height: 8px;
    background: var(--dc-line-dash);
}
.dlg-form.dlg-dd .dd-count__dot--on.mud-avatar{
    background: var(--dd-ok-solid);
}

/* --------------------------------------------------------------------------
   §14 — Alerta de debida diligencia reforzada. Misma caja que .dd-warn, un
   escalon mas grande: es el aviso de la pantalla, no el del screening.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-edd{
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--dc-error);
    border-radius: 10px;
    background: var(--dd-error-wash);
}
.dlg-form.dlg-dd .dd-edd__disc.mud-avatar{
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    background: var(--dc-error);
    color: var(--dd-ok-solid-ink);
}
.dlg-form.dlg-dd .dd-edd__disc .mud-icon-root{
    font-size: 14px;
    width: 14px;
    height: 14px;
}
.dlg-form.dlg-dd .dd-edd__txt{
    gap: 4px;
    min-width: 0;
}
.dlg-form.dlg-dd .dd-edd__t{
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 800;
    color: var(--dc-error);
}
.dlg-form.dlg-dd .dd-edd__b{
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--dc-text);
}

/* --------------------------------------------------------------------------
   §15 — TRAZABILIDAD. Cuatro columnas iguales con el punto pegado a la
   izquierda y el conector a su derecha. MudTimeline no ofrece ese hueco.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-trace.mud-paper{
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--dc-line-card);
    border-radius: 12px;
    background: var(--dc-surface);
}
/* Marca de disponibilidad, a la derecha del encabezado de seccion. */
.dlg-form.dlg-dd .dd-trace__ok{
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dd-ok-solid);
    white-space: nowrap;
}
.dlg-form.dlg-dd .dd-trace__ok .mud-icon-root{
    font-size: 14px;
    width: 14px;
    height: 14px;
}
.dlg-form.dlg-dd .dd-track{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}
.dlg-form.dlg-dd .dd-step{
    gap: 10px;
    min-width: 0;
}
.dlg-form.dlg-dd .dd-step__dots{
    gap: 0;
}
/* El punto pendiente va hueco y sin glifo: un icono invisible solo seria ruido. */
.dlg-form.dlg-dd .dd-step__dot.mud-avatar{
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 2px solid var(--dc-line-dash);
    background: var(--dc-surface);
}
.dlg-form.dlg-dd .dd-step__dot--on.mud-avatar{
    border-color: var(--dc-navy);
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
}
.dlg-form.dlg-dd .dd-step__dot .mud-icon-root{
    font-size: 14px;
    width: 14px;
    height: 14px;
}
/* El conector se pinta navy solo entre dos pasos cumplidos. */
.dlg-form.dlg-dd .dd-step__line{
    flex: 1;
    height: 2px;
    background: var(--dc-line-field);
}
.dlg-form.dlg-dd .dd-step__line--on{
    background: var(--dc-navy);
}
.dlg-form.dlg-dd .dd-step__txt{
    gap: 2px;
    min-width: 0;
    padding-right: 12px;
}
.dlg-form.dlg-dd .dd-step__t{
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--dc-text);
}
.dlg-form.dlg-dd .dd-step__t--off{
    color: var(--dc-placeholder);
}
.dlg-form.dlg-dd .dd-step__d{
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dc-text-2);
}
.dlg-form.dlg-dd .dd-step__m{
    margin: 0;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--dc-placeholder);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   §16 — Pie del detalle: el caso decidido cambia el grupo derecho por una
   linea de texto. El grupo izquierdo (CERRAR + contador) sigue en pie.
   -------------------------------------------------------------------------- */
.dlg-form.dlg-dd .dd-decided{
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dc-text-muted);
}