/* ==========================================================================
   BASE APP-WIDE — html/body, inputs, botones, cards, titular, MudTabs. Ver §3, §5.
   Archivo 2 de 9. El ORDEN de los nueve importa: Docs/DESIGN-LANGUAGE.md.
   ========================================================================== */
/* En oscuro la elevacion es color, no sombra. Anillo inset, no border. Ver §3. */
.app-dark .mud-elevation-1,
.app-dark .mud-elevation-2,
.app-dark .mud-elevation-3,
.app-dark .mud-elevation-4{
    box-shadow: inset 0 0 0 1px var(--mud-palette-lines-default);
}
html, body{
    font-family: "Nunito Sans", system-ui, sans-serif;
    display: flex;
    align-items: center;
    /*background-color: var(--background-color-darkmode);*/
}
/* html/body son flex para centrar el login; forzados al 100% de ancho. */
body{
    flex: 1 1 auto;
    min-width: 0;
}
.mud-layout{
    flex: 1 1 auto;
    min-width: 0;
}
.controlsForm{
    padding-top: 20px;
    display: flex;
    width: 100%;
}
/* Global: padding de celda en TODAS las tablas MudBlazor (default 16px) */
.mud-table-cell{
    padding: 13px;
    font-feature-settings: "tnum" 1;
}
/* APP-WIDE — radio de impacto: toda la app, no una tabla. */
.mud-button-filled{
    box-shadow: none;
}
/* Elevation 0 + contorno. Son div, no MudPaper, asi que no tienen parametro Outlined. */
.cardContainer.mud-elevation-0{
    border: 1px solid var(--mud-palette-lines-default);
}
/* El relleno va en el root del input, NO en el fieldset. Ver §8, trampa 11. */
.mud-input.mud-input-outlined{
    background-color: var(--field-fill);
    border-radius: var(--mud-default-borderradius);
}
/* WCAG 1.4.11 pide 3:1 para el limite del campo. Valores medidos en §2.5. */
.mud-input-outlined-border{
    border-color: var(--field-border);
}
/* Subir la opacidad es la palanca equivocada. Ver §2.5, "Campos: borde y placeholder". */
.mud-input > input.mud-input-root::placeholder,
.mud-input > textarea.mud-input-root::placeholder,
div.mud-input-slot.mud-input-root::placeholder{
    color: var(--mud-palette-text-secondary);
    opacity: 1;
}
/* Wrapper for the L1 ATRIBUTOS cell in IssuanceOrderGroupedTable.razor /
   IssuanceOrderTable.razor, which can hold up to two `OrderAttrChip`s
   (renewability + insured item) side by side (spec B4/C4). */
.attr-chip-group{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* MudTabs — costura de esquinas y tab activo ilegible, en las 8 instancias.
   Ver §8, trampas 24 y 25. */
/* Espejar la forma de MudBlazor: las dos clases en el mismo elemento. Ver §8, trampa 23. */
.mud-tabs.mud-tabs-rounded .mud-tabs-tabbar{
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
}
.mud-tabs.mud-tabs-rounded .mud-tabs-panels{
    border-radius: 0 0 var(--mud-default-borderradius) var(--mud-default-borderradius);
}
.mud-tabs-tabbar .mud-tab{
    opacity: 0.72;
    transition: opacity var(--motion-fast) var(--motion-ease);
}
.mud-tabs-tabbar .mud-tab.mud-tab-active{
    opacity: 1;
    font-weight: 600;
}
.mud-tab-slider.mud-tab-slider-horizontal{
    height: 3px;
    border-radius: 3px 3px 0 0;
}
/* Titular de pagina — fuente unica para los 21 <h1>. Por que 1.75rem y no H4/H5: §5.1. */
.titleHeader{
    margin: 0;
    font-size: var(--page-title-size);
    /* Hard 700, not `var(--mud-typography-h5-weight)` (600) — design system §4
       mandates 700 for the page title specifically, distinct from `Typo.h5`'s
       own weight (S1c). */
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gh-title);
    line-height: var(--mud-typography-h5-lineheight);
    white-space: nowrap;
    width: max-content;
}
/* NO colapsar en un solo :focus: silenciaria el anillo del teclado real. Ver §5.2. */
.titleHeader:focus{
    outline: none;
}
.titleHeader:focus-visible{
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
    border-radius: var(--mud-default-borderradius);
}
/* Casilla nativa: el control de MudBlazor es un SVG y un SVG no toma radio. */
.chk{
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--gh-line-row-1);
    border-radius: 7px;
    background: var(--mud-palette-surface);
    display: grid;
    place-content: center;
    cursor: pointer;
}
.chk:checked{
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
}
.chk:checked::after{
    content: "";
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border-left: 2px solid var(--mud-palette-primary-text);
    border-bottom: 2px solid var(--mud-palette-primary-text);
    transform: rotate(-45deg);
}
.chk:disabled{
    cursor: default;
    opacity: .6;
}

/* MudBlazor anima left/right: no son compuestas y recalculan layout cada frame.
   Medido con CLSCulprits. Ver §8, trampas 7 y 32. */
.mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-1-indeterminate.horizontal,
.mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-2-indeterminate.horizontal{
    left: 0;
    right: auto;
    width: 100%;
    transform-origin: left center;
    will-change: transform;
}
/* Solo el nombre: duracion, easing, delay e iteracion siguen siendo los de MudBlazor. */
.mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-1-indeterminate.horizontal{
    animation-name: bl-progress-indeterminate1;
}
.mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-2-indeterminate.horizontal{
    animation-name: bl-progress-indeterminate2;
}
/* Traduccion fiel: left/right definen borde izquierdo y ancho; con origin izquierdo,
   translateX es el borde y scaleX es el ancho. -35%/100% => x=-35% w=35%. */
@keyframes bl-progress-indeterminate1{
    0%       { transform: translateX(-35%) scaleX(.35); }
    60%,100% { transform: translateX(100%) scaleX(.9); }
}
@keyframes bl-progress-indeterminate2{
    0%       { transform: translateX(-200%) scaleX(2); }
    60%,100% { transform: translateX(107%) scaleX(.01); }
}