/* ==========================================================================
   DIALOGOS Y CAMPOS — .dlg-*, .fld*, panel de documentos. Ver §6.2, §6.4, §6.5.
   Archivo 3 de 9. El ORDEN de los nueve importa: Docs/DESIGN-LANGUAGE.md.
   ========================================================================== */
/* Dialogo "Administrar / Abrir siniestro" — vive aca y no en un .razor.css porque
   un MudDialog renderiza fuera del subarbol del componente. Ver §6.2. */
/* SELECTOR COMPUESTO, no de descendencia: el Class cae en el mismo nodo. Ver §8, trampa 5. */
/* Cromo unico para todo modal de la app. Decision del dueño 2026-09-15. Ver §6.2. */
/* Sin max-width: el ancho lo fija MaxWidth en cada llamada. Ver §8, trampa 21. */
.mud-dialog.dlg-form{
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-radius: 14px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    box-shadow: var(--dlg-shadow);
}
/* El velo lo pinta el cromo, no la paleta de MudBlazor. */
.mud-dialog-container:has(.dlg-form) .mud-overlay-scrim{
    background: var(--dlg-overlay);
}
/* (0,3,0): le gana por merito a la regla (0,2,0) de MudBlazor. Ver §8, trampa 21. */
.mud-dialog.dlg-form .mud-dialog-title{
    margin: 0;
    padding: 22px 28px 18px;
    border-bottom: 1px solid var(--dlg-line);
}
.mud-dialog.dlg-form .dlg-form__body{
    /* 28px = el mismo valor del encabezado y del pie: una sola columna optica. */
    padding: 18px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-height: 0;
    overflow-y: auto;
}
/* Contenido a sangre (tiras y grillas): el cuerpo no indenta nada. */
.mud-dialog.dlg-form.dlg-form--flush .dlg-form__body{
    padding: 0;
}
.mud-dialog.dlg-form .dlg-form__actions{
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--dlg-line);
    padding: 16px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* Ranura izquierda del pie: el resumen que explica lo que el boton hara. */
.dlg-foot__note{
    font-size: 13px;
    color: var(--dlg-muted);
}
/* margin-left:auto: sin nota a la izquierda, space-between dejaria el par pegado
   al borde izquierdo. Con nota, el auto no cambia nada. */
.dlg-foot__btns{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
/* Descartar no destruye: neutro, sin plato ni borde. Ver §6.2.2. */
.dlg-cancel.mud-button-root{
    height: auto;
    min-width: 0;
    padding: 12px 4px;
    background: transparent;
    color: var(--dlg-navy);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: none;
}
.dlg-cancel.mud-button-root:hover{
    background: transparent;
}
.dlg-save.mud-button-root{
    height: auto;
    min-width: 0;
    padding: 12px 22px;
    border-radius: 8px;
    background: var(--dlg-navy);
    color: var(--dlg-navy-ink);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: none;
}
/* El navy ya es el acento: al pasar el puntero no cambia de tono ni levanta sombra. */
.dlg-save.mud-button-root:hover,
.dlg-save.mud-button-root:focus-visible,
.dlg-save.mud-button-root:active{
    background: var(--dlg-navy);
    box-shadow: none;
}
/* El glifo del boton primario: un solo hueco, sin los margenes de MudBlazor. */
.dlg-save .mud-button-label{
    gap: 8px;
}
.dlg-save .mud-button-icon-start{
    margin: 0;
}
.dlg-save .mud-icon-root{
    font-size: 16px;
}
/* Deshabilitado mide 2.06:1 y se acepta asi: decisión del dueño 2026-09-15. */
.dlg-save.mud-button-root.mud-disabled{
    opacity: 1;
    background: var(--dlg-line);
    color: var(--dlg-placeholder);
    cursor: default;
}
/* Anular o borrar es la misma caja que guardar, con el rojo destructivo: el
   dialogo ya lo pintaba rojo antes del cromo unico. Ver §6.2.2. */
.dlg-save--danger.mud-button-root,
.dlg-save--danger.mud-button-root:focus-visible,
.dlg-save--danger.mud-button-root:active{
    background: var(--danger-bg-strong);
    color: #FFFFFF;
}
.dlg-save--danger.mud-button-root:hover{
    background: var(--danger-bg-strong-hover);
}
/* Secundario: 1px menos de relleno que .dlg-save, para que el borde no agrande la caja. */
.dlg-outlined.mud-button-root{
    height: auto;
    min-width: 0;
    padding: 11px 21px;
    border: 1px solid var(--dlg-navy);
    border-radius: 8px;
    background: var(--dc-surface);
    color: var(--dlg-navy);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: none;
}

/* Encabezado de dialogo: titulo, subtitulo y la ×. El relleno lo pone
   .mud-dialog-title, nunca esta fila. Ver §6.2. */
.dlg-head{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.dlg-head__t{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.dlg-head__title{
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dlg-navy);
}
.dlg-head__sub{
    font-size: 13px;
    color: var(--dlg-muted);
    text-wrap: pretty;
}
/* El plato esta siempre, no solo al pasar el puntero: la × es una salida, no un adorno. */
.dlg-head__x.mud-icon-button{
    width: 36px;
    height: 36px;
    flex: none;
    padding: 0;
    border-radius: 8px;
    background: var(--dlg-plate);
    color: var(--dlg-text-2);
}
.dlg-head__x .mud-icon-root{
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* Confirmacion: pregunta corta y dos botones. UNA sola clase, sin ContentClass
   ni ActionsClass — gana por especificidad (0,3,0). Ver §6.2.3. */
/* Mismo cromo que .dlg-form: un dialogo es un dialogo. Solo el ancho es suyo. */
.mud-dialog.dlg-confirm{
    /* 480 - 2x28 = 424px de texto, ~57 caracteres por linea: dentro de la
       medida optima de 45-75. Ver §6.2.3. */
    width: 480px;
    max-width: calc(100vw - 32px);
    border-radius: 14px;
}
/* Nada de max-height, scroll ni footer sticky: en tres lineas son inertes. */
.mud-dialog.dlg-confirm .mud-dialog-title{
    margin: 0;
    padding: 22px var(--pad-dialog) 18px;
    border-bottom: 1px solid var(--dlg-line);
}
.mud-dialog.dlg-confirm .mud-dialog-content{
    padding: 18px var(--pad-dialog) 0;
    overflow: visible;
}
.mud-dialog.dlg-confirm .mud-dialog-actions{
    padding: 16px var(--pad-dialog);
    border-top: 1px solid var(--dlg-line);
    gap: 12px;
    justify-content: space-between;
    align-items: center;
}
.dlg-confirm__title{
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--dlg-navy);
}
.dlg-confirm__text{
    line-height: 1.55;
    color: var(--gh-body);
}
/* Lista acotada cuando la confirmacion enumera lo que toca: mismos 190px que
   .excl-dlg__items, para que el dialogo no crezca. */
.dlg-confirm__list{
    max-height: 190px;
    overflow-y: auto;
}
/* La pregunta puede nombrar lo que se destruye; se resalta sin cambiar de color. */
.dlg-confirm__text strong{
    font-weight: 700;
    color: var(--gh-strong);
}
/* Wizard de orden de emision — misma razon que el dialogo de arriba para vivir aca. */
.dlg-form__code{
    padding: 6px 14px;
    background: var(--field-fill);
    border-radius: var(--r-chip);
    font-size: 13.5px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em;
    color: var(--gh-body);
    white-space: nowrap;
    margin-left: 12px;
}
.dlg-form__validation-summary{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--status-warn-fg);
}
.dlg-form__validation-summary-dot{
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--status-warn-dot);
    flex-shrink: 0;
}
.dlg-form__validation-summary-text{
    cursor: pointer;
}
/* Spec D4: "Anterior" renders always, disabled (not hidden) on step 1 — an
   outlined button never dances in or out of the footer between steps. */
.dlg-form__prev.mud-button-outlined.mud-disabled{
    opacity: .5;
}
/* El hijo monta invisible y un skeleton ocupa su lugar hasta OnReady. Ver §6.8. */
.dlg-form__step-body{
    position: relative;
}
.dlg-form__step-body--hidden{
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.dlg-form__skeleton{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 0 26px;
}
.dlg-form__skeleton-bar{
    height: 14px;
    border-radius: 999px;
    background: var(--field-fill);
}
.dlg-accident__title{
    display: flex;
    align-items: center;
    gap: 14px;
}
.dlg-accident__title .mud-typography{
    flex: 1;
}
.dlg-accident__code{
    padding: 6px 14px;
    background: var(--field-fill);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gh-body);
    white-space: nowrap;
}
.dlg-accident__summary{
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: baseline;
    /* Sin borde propio: el del título ya separa; con los dos se veía doble línea. */
    padding: 12px 0 0;
}
.dlg-accident__summary .k{
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gh-label-2);
    margin-bottom: 3px;
}
.dlg-accident__summary .v{
    font-size: 15px;
    font-weight: 600;
    color: var(--gh-strong);
}
.dlg-accident__hint{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 0;
    font-size: 14px;
    color: var(--gh-body);
}
.dlg-sec{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 7px;
}
/* Ritmo de los diálogos maduros (.ap): 20 al primer título, 14 título→campo,
   26 campo→título. Con el gutter de 20 de MudGrid Spacing=5. */
.dlg-accident .dlg-sec{
    margin: 6px 0 14px;
}
/* Título solo en su ítem: el padding-top 20 del ítem siguiente ya aporta el aire. */
.dlg-accident .mud-grid-item.pb-0 > .dlg-sec{
    margin-bottom: -6px;
}
.dlg-accident .mud-grid > .mud-grid-item:first-child > .dlg-sec{
    margin-top: 2px;
}
.dlg-sec__t{
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--gh-label-2);
    white-space: nowrap;
}
.dlg-sec__l{
    flex: 1;
    height: 1px;
    background: var(--gh-line-divider);
}
.dlg-sec__hint{
    font-size: 12.5px;
    color: var(--gh-label-1);
    white-space: nowrap;
}
/* Derivado, no input: sin relleno y con regla punteada. Ver §6.4. */
.dlg-ro{
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--gh-line-tray-2);
}
.dlg-ro__k{
    display: block;
    font-size: 12px;
    color: var(--gh-label-1);
    margin-bottom: 4px;
}
.dlg-ro__v{
    display: block;
    font-size: 15px;
    color: var(--gh-body);
    min-height: 22px;
}
/* Empty derived field: a skeleton bar, never an empty section (§9). */
.dlg-ro__skeleton{
    display: block;
    height: 10px;
    margin: 6px 0;
    border-radius: 999px;
    background: var(--gh-tray-2);
    max-width: 70%;
}
.dlg-form .fld .mud-input.mud-input-filled{
    border-radius: 10px;
    background: var(--field-fill);
}
.dlg-form .fld .mud-input.mud-input-filled:hover{
    background: var(--field-fill-hover);
}
.dlg-form .fld .mud-input-filled::before,
.dlg-form .fld .mud-input-filled::after{
    display: none;
}
/* Amounts right-aligned with a thousands separator (§3.3, last bullet). */
.dlg-form .fld--money input{
    text-align: right;
    font-feature-settings: "tnum" 1;
    font-weight: 600;
}
.dlg-form .fld .mud-input-adornment{
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gh-label-2);
}
/* Ayuda del campo: mismos valores que .ap .fld__helper, ahora para todo diálogo. */
.dlg-form .fld .mud-input-helper-text{
    font-size: 12px;
    font-weight: 400;
    color: var(--gh-label-2);
}
.dlg-form .fld .mud-input-helper-text.mud-input-error{
    font-size: 11.5px;
    color: var(--status-danger-fg);
}
/* Read-only NO es un input: sin relleno, sin chevron, regla punteada. Ver §6.8. */
.dlg-form .fld--ro .mud-input.mud-input-filled{
    background: transparent;
    border-radius: 0;
    border-bottom: 1px dashed var(--line-input);
}
.dlg-form .fld--ro .mud-input.mud-input-filled:hover{
    background: transparent;
}
.dlg-form .fld--ro .mud-input-slot{
    color: var(--gh-body);
}
.dlg-form .fld--ro .mud-input-label{
    color: var(--text-support);
}
.dlg-form .fld--ro .mud-input-adornment{
    display: none;
}
.dlg-form .fld--outline .mud-input.mud-input-filled{
    background: var(--mud-palette-surface);
    border: 1px solid var(--line-input);
    border-radius: 10px;
}
.dlg-form .fld--outline .mud-input.mud-input-filled:hover{
    border-color: var(--field-border);
}
/* MudSelect no tiene slot AdornmentContent. Ver §8, trampa 31. */
.fld-chip-wrap{
    position: relative;
}
.fld-chip-wrap__badge{
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    padding: 2px 9px;
    background: var(--surf-chip-neutral);
    border-radius: var(--r-chip);
    font-size: 11px;
    font-weight: 700;
    color: var(--gh-label-2);
    pointer-events: none;
    white-space: nowrap;
}
/* Observaciones / Documentos blocks. */
.dlg-form .dlg-block{
    border-color: var(--gh-line-divider);
    border-radius: 14px;
}
.dlg-form .dlg-block__head{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.dlg-form .dlg-block__t{
    font-size: 15px;
    font-weight: 600;
    color: var(--gh-strong);
    flex: 1;
}
.dlg-form .dlg-block__count{
    font-size: 13px;
    color: var(--gh-label-1);
}
/* Hijo directo del cuerpo: el gap de 22 ya lo separa; con el margin de 20 se duplicaba. */
.mud-dialog.dlg-form .dlg-form__body > .file-upload-panel{
    margin-top: 0;
}
/* Panel de documentos — restilado desde afuera: lo comparten nueve pantallas. Ver §6.5. */
.dlg-form .file-upload-panel{
    margin-top: 20px;
    border-color: var(--gh-line-divider);
    border-radius: 14px;
    /* §6: the card was ~200px tall for a single file. */
    padding: 14px 18px !important;
}
.dlg-form .file-upload-panel__chips .mud-chip{
    border: 0;
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: 12.5px;
    font-weight: 600;
    height: auto;
    padding: 5px 12px;
}
.dlg-form .file-upload-panel__chips .mud-chip .mud-icon-root{
    display: none;
}
.dlg-form .file-upload-panel__chips .mud-chip:first-child::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    margin-right: 7px;
    flex: 0 0 auto;
}
/* El tinte va en __file-row y no en __file-meta, que solo mide 364px de 912. */
/* El hover pinta la banda envolvente, 32px mas por lado. Ver §8, trampa 20. */
.dlg-form .file-upload-panel .mud-list-item{
    padding: 0;
    cursor: default;
}
.dlg-form .file-upload-panel .mud-list-item.mud-list-item-clickable:hover,
.dlg-form .file-upload-panel .mud-list-item.mud-list-item-clickable:focus:not(.mud-selected-item),
.dlg-form .file-upload-panel .mud-list-item.mud-list-item-clickable:active{
    background-color: transparent;
}
/* The ripple is injected at click time and would still flash across the full band. */
.dlg-form .file-upload-panel .mud-list-item .mud-ripple-element{
    display: none;
}
.dlg-form .file-upload-panel__file-row{
    background: var(--field-fill);
    border-radius: 10px;
    padding: 8px 12px;
    width: 100%;
    transition: background-color .15s ease;
}
.dlg-form .file-upload-panel__file-row:hover{
    background: var(--field-fill-hover);
}
.dlg-form .file-upload-panel__file-meta{
    background: transparent;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.dlg-form .file-upload-panel__file-copy{
    flex: 1 1 auto;
    min-width: 0;
}
.dlg-form .file-upload-panel__file-copy .mud-chipset{
    margin-left: auto;
}
/* El color de reposo no se puede hacer desde CSS: .mud-error-text lleva !important. Ver §6.5. */
.dlg-form .file-upload-panel__file-row .mud-icon-button{
    color: var(--gh-label-1);
    border-radius: 10px;

    /* La placa hay que forzarla cuadrada: la caja medida es 26x44. Ver §7. */
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
/* Hover / focus: red glyph on a soft red plate, both from the palette's destructive pair
   rather than derived here — see the `--danger-ink` / `--danger-plate` notes. */
.dlg-form .file-upload-panel__file-row .mud-icon-button:hover,
.dlg-form .file-upload-panel__file-row .mud-icon-button:focus-visible{
    color: var(--danger-ink);
    background-color: var(--danger-plate);
}
/* App-wide a proposito: el panel esta en nueve pantallas. */
.file-upload-panel__help-text,
.file-upload-panel__description{
    color: var(--mud-palette-text-secondary);
}
.dlg-form .file-upload-panel__help-text{
    font-size: 12.5px;
}
/* §6: 40px, down from the default filled-button height. `nowrap` raises min-content
   width so the help text's `flex: 1 1 18rem` cannot break the label. */
.dlg-form .file-upload-panel__actions .mud-button-root{
    min-height: 40px;
    white-space: nowrap;
    flex: none;
}
/* Sin opacity: multiplicaria sobre el texto y rompe el piso de contraste. Ver §6.9. */
.fld--ro{
    padding: 6px 0;
    border-bottom: 1px dashed var(--line-input);
    font-size: 14.5px;
    color: var(--gh-strong);
}
/* Estaban duplicadas en un <style> inline de dos .razor. Ver §8, trampa 17. */
.dlg-form .input{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 5px 0;
}
.dlg-form .input label{
    margin: 5px 0;
}
/* Comparte cifras tabulares con --money pero NO su alineacion: el prefijo va pegado al numero. */
.dlg-form .fld--amount input{
    font-feature-settings: "tnum" 1;
    font-weight: 600;
}
.dlg-form__foot-note{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    font-size: 12.5px;
    color: var(--status-warn-fg);
}
.dlg-form__foot-dot{
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--status-warn-dot);
}
.fld--warn .mud-input-control .mud-input-slot,
.fld--warn .mud-input-control .mud-input{
    border-color: var(--status-warn-fg);
}
.dlg-form__title{
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.dlg-form__chip{
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--gh-tray-1);
    color: var(--gh-title);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.dlg-form__note{
    margin-right: auto;
    padding-left: 8px;
    font-size: 12.5px;
    color: var(--gh-label-1);
}
/* Modificación de póliza: lo que no se edita vive fuera del formulario. */
.dlg-form__sub{
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--gh-label-1);
}
.fld--ro__hint{
    margin-left: 10px;
    font-size: 12px;
    font-weight: 400;
    color: var(--gh-label-1);
}
/* Etiqueta de un dato derivado: chica y arriba, como el label flotante de un campo. */
.fld--ro__k{
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    color: var(--gh-label-1);
}
/* Aire entre label y valor, para todo campo del formulario. Excluye textarea:
   MudBlazor le enmascara los 23px superiores y el texto desaparecería. */
.dlg-form .fld .mud-input.mud-input-filled .mud-input-slot:not(textarea){
    padding-top: 26px;
    padding-bottom: 9px;
}
/* El label sube 1px para que el aire se reparta y no quede todo debajo de él. */
.dlg-form .fld .mud-shrink ~ label.mud-input-label-filled.mud-input-label-margin-dense,
.dlg-form .fld .mud-input:focus-within ~ label.mud-input-label-filled.mud-input-label-margin-dense{
    transform: translate(12px, 6px) scale(0.75);
}
/* Campo enfocado: contorno azul oscuro completo, no solo la línea inferior. */
/* .mud-input en la cadena para llegar a (0,5,0): gana por especificidad y no por
   orden de fuente, que es lo que .items-plan-create .fld le disputaba. */
.dlg-form .fld .mud-input.mud-input-filled.mud-focused,
.dlg-form .fld .mud-input.mud-input-filled:focus-within{
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-primary);
    border-radius: var(--gh-r-tray-2);
}
/* Descartar no es una acción menor: comparte peso con el botón que confirma. */
.dlg-form .dlg-cancel{
    font-weight: 700;
    color: var(--gh-title);
}
/* Campo sin label flotante: medida propia y sin el aire superior de la regla general. */
.dlg-form .fld--pct{
    width: 132px;
    margin-left: auto;
}
/* `:not(textarea)` sólo para igualar la especificidad de la regla general y no
   perder el desempate por orden de fuente. */
.dlg-form .fld--pct .mud-input.mud-input-filled .mud-input-slot:not(textarea){
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: right;
    font-weight: 600;
    font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   MODAL "NUEVO CLIENTE" — .dlg-client. Variante de .dlg-form con el handoff
   hifi del dueño. Todo bajo .dlg-form.dlg-client. Ver §6.2.4.
   ========================================================================== */
/* COMPUESTO: las dos clases caen en el mismo nodo .mud-dialog. Ver §8, trampa 5. */
/* Solo el ancho es suyo: radio, sombra, cabecera, cuerpo y pie los pone .dlg-form. */
.mud-dialog.dlg-form.dlg-client{
    width: 100%;
    max-width: 980px;
}
.dlg-form.dlg-client .dlg-client__step{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--dc-text-muted);
}

/* Rail: se pisa desde afuera porque Órdenes usa el mismo componente y no cambia.
   (0,3,0) contra el .razor.css scopeado (0,2,0). Ver §6.2.4. */
.dlg-form.dlg-client .step-rail{
    gap: 6px;
    row-gap: 12px;
    padding: 0;
}
.dlg-form.dlg-client .step-rail__item{
    gap: 10px;
}
.dlg-form.dlg-client .step-rail__circle{
    width: 26px;
    height: 26px;
    font-size: 13px;
}
.dlg-form.dlg-client .step-rail__circle--completed{
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
}
.dlg-form.dlg-client .step-rail__circle--current{
    border-color: var(--dc-navy);
    color: var(--dc-navy);
    font-weight: 700;
}
.dlg-form.dlg-client .step-rail__circle--pending{
    background: var(--dc-fill);
    color: var(--dc-text-muted);
    font-weight: 600;
}
.dlg-form.dlg-client .step-rail__label{
    font-size: 14px;
    font-weight: 500;
    color: var(--dc-text-muted);
}
.dlg-form.dlg-client .step-rail__label--completed{
    color: var(--dc-text);
}
.dlg-form.dlg-client .step-rail__label--current{
    font-weight: 800;
    color: var(--dc-text);
}
/* El mock no tiene paso bloqueado; su razon sigue legible con la paleta nueva. */
.dlg-form.dlg-client .step-rail__reason{
    color: var(--dc-text-muted);
}
/* Paso pendiente clicable: la hoja scopeada carga antes, asi que el hover y el
   foco se repintan aca con la paleta del modal. */
.dlg-form.dlg-client .step-rail__circle--ahead:hover,
.dlg-form.dlg-client .step-rail__label--ahead:hover{
    color: var(--dc-text);
}
.dlg-form.dlg-client .step-rail__circle--ahead:focus-visible{
    outline-color: var(--dc-navy);
}
/* Conector fijo de 22px: el base es elastico y estiraba el rail. */
.dlg-form.dlg-client .step-rail__connector{
    flex: 0 0 22px;
    width: 22px;
    min-width: 0;
    height: 2px;
    border-radius: 1px;
    margin: 0 6px;
}
.dlg-form.dlg-client .step-rail__connector--done{
    background: var(--dc-navy);
}
.dlg-form.dlg-client .step-rail__connector--pending{
    background: var(--dc-line-field);
}

/* Rail, separador y pasos son hermanos del cuerpo: los 22px de aire los da el
   gap de .dlg-form__body, no un margen por bloque. */
.dlg-form.dlg-client .dlg-client__sep{
    border-color: var(--dc-line-card);
}
.dlg-form.dlg-client .dlg-form__step-body{
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Encabezado de seccion: linea opcional (Line), contador pill y ayuda a la derecha. */
.dlg-form.dlg-client .dlg-sec{
    margin: 0;
    gap: 10px;
}
.dlg-form.dlg-client .dlg-sec__t{
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--dc-text-2);
}
/* La linea solo se monta con Line="true"; aca toma el tono de la tarjeta. */
.dlg-form.dlg-client .dlg-sec__l{
    background: var(--dc-line-card);
}
.dlg-form.dlg-client .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-client .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-client .dlg-sec__count .mud-chip-content{
    height: auto;
    padding: 0;
}

/* Campo relleno FUERA de panel (correo/web): sin borde, 56px de alto intrinseco. */
.dlg-form.dlg-client .fld .mud-input.mud-input-filled{
    min-height: 56px;
    border-radius: 8px;
    background: var(--dc-fill);
    border: 0;
}
.dlg-form.dlg-client .fld .mud-input.mud-input-filled:hover{
    background: var(--dc-fill);
}
.dlg-form.dlg-client .fld .mud-input.mud-input-filled .mud-input-slot:not(textarea){
    padding: 27px 14px 9px;
    font-size: 15px;
    color: var(--dc-text);
}
.dlg-form.dlg-client .fld .mud-input-slot::placeholder{
    color: var(--dc-placeholder);
    opacity: 1;
}
.dlg-form.dlg-client .fld .mud-shrink ~ label.mud-input-label-filled.mud-input-label-margin-dense,
.dlg-form.dlg-client .fld .mud-input:focus-within ~ label.mud-input-label-filled.mud-input-label-margin-dense{
    transform: translate(14px, 8px);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dc-text-2);
}
/* Campo relleno DENTRO de un panel de alta: blanco, con borde y mas compacto. */
.dlg-form.dlg-client .fld--outline .mud-input.mud-input-filled{
    min-height: 52px;
    background: var(--dc-surface);
    border: 1px solid var(--dc-line-field);
}
.dlg-form.dlg-client .fld--outline .mud-input.mud-input-filled .mud-input-slot:not(textarea){
    padding: 24px 12px 8px;
    font-size: 14.5px;
}
.dlg-form.dlg-client .fld--outline .mud-shrink ~ label.mud-input-label-filled.mud-input-label-margin-dense,
.dlg-form.dlg-client .fld--outline .mud-input:focus-within ~ label.mud-input-label-filled.mud-input-label-margin-dense{
    transform: translate(12px, 7px);
    font-size: 11px;
}
.dlg-form.dlg-client .fld--disabled .mud-input.mud-input-filled{
    background: var(--dc-disabled);
    opacity: .55;
}

/* Tarjeta de item de lista (telefono, direccion). */
.dlg-form.dlg-client .dc-card{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--dc-line-card);
    border-radius: 10px;
    background: var(--dc-surface);
}
/* La tarjeta de direccion respira 1px mas: el mock la mide distinto. */
.dlg-form.dlg-client .dc-card--addr{
    padding: 13px 16px;
}
.dlg-form.dlg-client .dc-card__icon{
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dc-fill);
    color: var(--dc-navy);
}
.dlg-form.dlg-client .dc-card__icon .mud-icon-root{
    font-size: 17px;
    width: 17px;
    height: 17px;
}
.dlg-form.dlg-client .dc-card__body{
    flex: 1;
    min-width: 160px;
    gap: 1px;
}
.dlg-form.dlg-client .dc-card__title{
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--dc-text);
}
.dlg-form.dlg-client .dc-card--addr .dc-card__title{
    font-size: 15px;
}
.dlg-form.dlg-client .dc-card__sub{
    margin: 0;
    font-size: 12.5px;
    color: var(--dc-text-muted);
}

/* Toggle Principal: un solo clic define el principal, sin radio ni menu. */
.dlg-form.dlg-client .dc-principal.mud-button-root{
    min-height: 0;
    min-width: 0;
    padding: 5px 12px;
    border: 1px solid var(--dc-line-dash);
    border-radius: 999px;
    background: var(--dc-surface);
    color: var(--dc-text-2);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: none;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dlg-form.dlg-client .dc-principal--on.mud-button-root{
    border-color: var(--dc-navy);
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
}

.dlg-form.dlg-client .dc-trash.mud-icon-button{
    padding: 4px 6px;
    background: none;
    color: var(--dc-placeholder);
    transition: color .15s ease;
}
.dlg-form.dlg-client .dc-trash.mud-icon-button:hover{
    background: none;
    color: var(--dc-error);
}
.dlg-form.dlg-client .dc-trash .mud-icon-root{
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Panel de alta inline: punteado por defecto, solido en el alta de contacto. */
.dlg-form.dlg-client .dc-panel{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border: 1.5px dashed var(--dc-line-dash);
    border-radius: 10px;
    background: var(--dc-panel);
}
.dlg-form.dlg-client .dc-panel--lg{
    padding: 18px;
    border-radius: 12px;
}
.dlg-form.dlg-client .dc-panel--solid{
    border: 1px solid var(--dc-line-dash);
    border-radius: 12px;
}
/* El alta de contacto es el unico panel que cierra 2px mas corto abajo. */
.dlg-form.dlg-client .dc-panel--contact{
    padding: 18px 18px 16px;
}
.dlg-form.dlg-client .dc-panel__title{
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--dc-text);
}
.dlg-form.dlg-client .dc-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;
}

/* Boton primario chico de panel. --field alinea con el campo vecino de 52px. */
.dlg-form.dlg-client .dc-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-client .dc-btn.mud-button-root:hover{
    background: var(--dc-navy-hover);
}
.dlg-form.dlg-client .dc-btn--field.mud-button-root{
    height: 52px;
    padding: 0 18px;
}

.dlg-form.dlg-client .dc-error{
    margin: 0 auto 0 0;
    font-size: 12.5px;
    color: var(--dc-error);
}

/* Celda "Añadir contacto": es un boton, asi que hay que aplanar MudButton. */
.dlg-form.dlg-client .dc-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-client .dc-add-tile.mud-button-root:hover{
    border-color: var(--dc-navy);
    background: var(--dc-hover);
}
.dlg-form.dlg-client .dc-add-tile .mud-button-label{
    flex-direction: column;
    gap: 6px;
}
.dlg-form.dlg-client .dc-add-tile__plus{
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dc-fill);
    font-size: 20px;
    line-height: 1;
}

/* Tarjeta de contacto designado: avatar con iniciales y papelera arriba. */
.dlg-form.dlg-client .dc-contact{
    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-client .dc-contact__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-client .dc-contact__body{
    flex: 1;
    min-width: 0;
}
.dlg-form.dlg-client .dc-contact__name{
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dlg-form.dlg-client .dc-contact__line{
    margin: 0;
    font-size: 12.5px;
    color: var(--dc-text-muted);
}
/* Ficha de contacto: 3px entre lineas, y el telefono abre otros 3px. */
.dlg-form.dlg-client .dc-contact__body{
    gap: 3px;
}
.dlg-form.dlg-client .dc-contact__line--phone{
    margin-top: 3px;
}
/* La papelera de la ficha de contacto cierra mas: va arriba, no centrada. */
.dlg-form.dlg-client .dc-contact .dc-trash{
    padding: 2px 4px;
}
.dlg-form.dlg-client .dc-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-client .dc-pill .mud-chip-content{
    height: auto;
    padding: 0;
}
/* La pill de tipo de direccion es la unica que va mas ancha. */
.dlg-form.dlg-client .dc-pill--lg.mud-chip{
    padding: 4px 10px;
}

/* Chips de tipo de domicilio: MudToggleGroup renderiza sus items como > button. */
.dlg-form.dlg-client .dc-chips.mud-toggle-group{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}
.dlg-form.dlg-client .dc-chips > button{
    min-width: 0;
    height: auto;
    padding: 6px 14px;
    border: 1.5px solid var(--dc-line-dash);
    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-client .dc-chips > button.dc-chips__on{
    border-color: var(--dc-navy);
    background: var(--dc-navy);
    color: var(--dc-navy-ink);
}

/* Grillas del handoff, declaradas aca para que cada paso solo aplique la clase. */
.dlg-form.dlg-client .dc-grid-2{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}
.dlg-form.dlg-client .dc-grid-cards{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.dlg-form.dlg-client .dc-grid-phone{
    display: grid;
    grid-template-columns: minmax(150px, 180px) minmax(200px, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}
.dlg-form.dlg-client .dc-grid-3{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.dlg-form.dlg-client .dc-grid-doc{
    display: grid;
    grid-template-columns: minmax(140px, 170px) minmax(180px, 1fr);
    gap: 10px;
}
.dlg-form.dlg-client .dc-grid-addr{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.dlg-form.dlg-client .dc-grid-street{
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr);
    gap: 10px;
}

/* Paso 1: cuatro columnas fijas; .dc-span-2 ensancha la razon social. */
.dlg-form.dlg-client .dc-grid-4{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.dlg-form.dlg-client .dc-span-2{
    grid-column: span 2;
}
@media (max-width: 760px){
    .dlg-form.dlg-client .dc-grid-4{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .dlg-form.dlg-client .dc-span-2{
        grid-column: 1 / -1;
    }
}
/* El paso 1 es una columna de secciones; el aire entre ellas vive aca. */
.dlg-form.dlg-client .dc-step{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
/* Tarjeta de casilla: el Class de MudCheckBox cae en su .mud-input-control raiz. */
.dlg-form.dlg-client .dc-check.mud-input-control{
    min-height: 56px;
    border: 1px solid var(--dc-line-card);
    border-radius: 8px;
    background: var(--dc-surface);
}
/* El label llena la tarjeta: toda la superficie conmuta la casilla. */
.dlg-form.dlg-client .dc-check .mud-input-control-input-container{
    flex: 1;
}
.dlg-form.dlg-client .dc-check .mud-checkbox{
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    margin: 0;
    padding: 0 12px 0 8px;
}
.dlg-form.dlg-client .dc-check__body{
    gap: 1px;
}
.dlg-form.dlg-client .dc-check__title{
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--dc-text);
}
.dlg-form.dlg-client .dc-check__sub{
    margin: 0;
    font-size: 12px;
    line-height: 1.3;
    color: var(--dc-text-muted);
}

/* Etiqueta de campo suelta: los chips de tipo de domicilio no traen la suya. */
.dlg-form.dlg-client .dc-field{
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.dlg-form.dlg-client .dc-field__label{
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--dc-text-2);
}

.mud-icon-root.mud-svg-icon.info-tip{
    font-size: 16px;
    color: var(--gh-label-2);
    cursor: help;
    vertical-align: middle;
}
/* El tooltip va al proveedor de popovers, fuera de todo scope: por eso es global. */
.mud-typography.info-tip__text{
    display: block;
    max-width: 300px;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
}
.mud-typography.info-tip__text + .info-tip__text{
    margin-top: 6px;
}
/* Si el tooltip queda encima del ícono, no le roba el hover: sin esto parpadea. */
.mud-popover.mud-tooltip:has(.info-tip__text){
    pointer-events: none;
}