/* ==========================================================================
   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. */
.mud-dialog.dlg-form{
    border-radius: 18px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.dlg-form__body{
    overflow-y: auto;
    padding: 0 28px 20px;
}
/* Pierde en padding contra la regla (0,2,0) de MudBlazor. Ver §8, trampa 21. */
.mud-dialog.dlg-form .dlg-form__actions{
    /* 28px = el mismo valor que __body, para que los botones alineen con el contenido. */
    padding: 18px 28px 16px;
}
.dlg-form__actions{
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--gh-line-divider);
    padding: 22px 56px 32px;
    gap: 12px;
}
/* Una sola regla para las dos familias de dialogo: asi no pueden driftear. */
.dlg-form .mud-button-root,
.dlg-confirm .mud-button-root{
    min-height: 44px;
    border-radius: 10px;
}
/* Descartar no destruye: neutro, no rojo. Ver §6.2.2. */
.dlg-cancel{
    color: var(--gh-body);
}

/* Confirmacion: pregunta corta y dos botones. UNA sola clase, sin ContentClass
   ni ActionsClass — gana por especificidad (0,3,0). Ver §6.2.3. */
.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: var(--gh-r-card);
}
/* Nada de max-height, scroll ni footer sticky: en tres lineas son inertes. */
.mud-dialog.dlg-confirm .mud-dialog-title{
    padding: 24px var(--pad-dialog) 0;
}
.mud-dialog.dlg-confirm .mud-dialog-content{
    padding: 12px var(--pad-dialog) 4px;
    overflow: visible;
}
.mud-dialog.dlg-confirm .mud-dialog-actions{
    padding: 16px var(--pad-dialog) 20px;
    gap: 12px;
    justify-content: flex-end;
}
.dlg-confirm__title{
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gh-title);
}
.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;
    padding: 12px 0 20px;
    border-bottom: 1px solid var(--gh-line-divider);
}
.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 18px;
    border-bottom: 1px solid var(--gh-line-divider);
    font-size: 14px;
    color: var(--gh-body);
}
.dlg-sec{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 26px 0 7px;
}
.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);
}
/* 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. */
.dlg-form .file-upload-panel__actions .mud-button-root{
    min-height: 40px;
}
/* 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;
}