html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background: url('../images/Logo.svg') center / contain no-repeat;
    width: 34px;
    height: 34px;
}

.header-company {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.1;
}

.header-company-name,
.header-company-code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-company-name {
    font-size: .8rem;
    font-weight: 600;
}

.header-company-code {
    font-size: .7rem;
    opacity: .75;
}

@media (max-width: 575.98px) {
    .header-company {
        display: none;
    }
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* El tema activo no incluye la utilidad visually-hidden de Bootstrap:
   oculta visualmente pero mantiene el contenido para lectores de pantalla. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =====================================================================
   Formularios de captura (pedido, factura, demás transacciones, detalle)

   Las cuatro familias de clases las asignan los modelos de presentación
   (SalesOrderPresentation, SalesInvoicePresentation, TransactionPresentation,
   CollectionDetailPresentation). Comparten un único conjunto de reglas para
   que tarjetas, resumen, total y foco se vean igual en todos los documentos.
   ===================================================================== */

/* Tokens: siguen el tema claro/oscuro activo de XAF; los temas Bootstrap
   conservan su paleta. Se definen en el ámbito de captura, donde las
   variables del tema están disponibles. */
.conto-invoice-capture,
.conto-order-capture,
.conto-transaction-capture,
.conto-detail-capture {
    --conto-surface: var(--dxds-color-surface-neutral-default-rest, var(--bs-body-bg, Canvas));
    --conto-content: var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, CanvasText));
    --conto-border: var(--dxds-color-border-neutral-default-rest, var(--bs-border-color, currentColor));
    --conto-accent: var(--dxds-color-content-primary-default-rest, var(--bs-primary, LinkText));
    --conto-accent-surface: var(--dxds-color-surface-primary-subdued-rest, color-mix(in srgb, var(--conto-accent) 10%, var(--conto-surface)));
    --conto-danger: var(--dxds-color-content-danger-default-rest, var(--bs-danger, currentColor));
    --conto-readonly: color-mix(in srgb, var(--conto-content) 78%, var(--conto-surface));
    --conto-card-shadow: 0 2px 8px color-mix(in srgb, var(--conto-content) 4%, transparent);
    --conto-summary-width: 420px;
    color: var(--conto-content);
    background: var(--conto-surface);
    padding: .5rem .75rem;
    border-radius: .5rem;
    row-gap: .5rem;
}

/* Título del documento */
.conto-invoice-heading,
.conto-order-heading,
.conto-transaction-heading {
    border: 0;
    padding-block: .25rem .75rem;
}

.conto-invoice-number,
.conto-order-identity,
.conto-transaction-identity {
    font-size: 1.1rem;
    font-weight: 700;
}

.conto-invoice-status,
.conto-order-status {
    color: var(--conto-accent);
    font-weight: 600;
}

/* Tarjetas */
.conto-invoice-header,
.conto-invoice-tabs,
.conto-invoice-summary,
.conto-invoice-credit,
.conto-order-header,
.conto-order-tabs,
.conto-order-summary,
.conto-transaction-header,
.conto-transaction-tabs,
.conto-transaction-summary,
.conto-detail-card,
.conto-detail-tabs {
    background: var(--conto-surface);
    color: var(--conto-content);
    border: 1px solid var(--conto-border);
    border-radius: .5rem;
    padding: .5rem .75rem;
    box-shadow: var(--conto-card-shadow);
    min-width: 0;
}

/* Contenedores sin marco propio */
.conto-invoice-header-column,
.conto-order-header-column,
.conto-transaction-header-column {
    min-width: 0;
    border: 0;
}

/* Los botones del lookup dejan el texto en ~31px cuando el campo comparte fila.
   Los lookups ocupan toda la columna; los textos cortos siguen en dos columnas. */
.conto-invoice-header-column dxbl-form-layout-item:has(dxbl-combo-box),
.conto-order-header-column dxbl-form-layout-item:has(dxbl-combo-box),
.conto-transaction-header-column dxbl-form-layout-item:has(dxbl-combo-box) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.conto-detail-header,
.conto-invoice-workspace,
.conto-invoice-sidebar,
.conto-order-lines,
.conto-transaction-lines {
    min-width: 0;
    border: 0;
    padding: 0;
}

.conto-detail-card { align-self: flex-start; }
.conto-detail-tabs { width: 100%; }
.conto-transaction-body-full .conto-transaction-lines { width: 100%; max-width: 100%; }

/* Resumen de importes: mismo acento superior en todos los documentos */
.conto-invoice-summary,
.conto-order-summary,
.conto-transaction-summary {
    align-self: flex-start;
    border-block-start: 3px solid var(--conto-accent);
}

.conto-invoice-summary input,
.conto-order-summary input,
.conto-transaction-summary input,
.conto-invoice-credit input[type="text"] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.conto-invoice-credit { margin-block-start: .5rem; }

.conto-invoice-credit-limit {
    font-size: 1.15rem;
    font-weight: 600;
}

.conto-invoice-credit-limit input {
    color: var(--conto-content);
    -webkit-text-fill-color: var(--conto-content);
    opacity: 1;
    font-variant-numeric: tabular-nums;
}

/* Total final */
.conto-invoice-final-total,
.conto-order-final-total,
.conto-transaction-final-total {
    color: var(--conto-accent);
    background: var(--conto-accent-surface);
    border: 0;
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-block: .5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Foco visible y campos inválidos */
.conto-invoice-capture :is(input, textarea, button, a, [tabindex]):focus-visible,
.conto-order-capture :is(input, textarea, button, a, [tabindex]):focus-visible,
.conto-transaction-capture :is(input, textarea, button, a, [tabindex]):focus-visible,
.conto-detail-capture :is(input, textarea, button, a, [tabindex]):focus-visible,
.conto-product-capture :is(input, textarea, button, a, [tabindex]):focus-visible {
    outline: 2px solid var(--conto-accent);
    outline-offset: 2px;
}

/* Los editores de solo lectura se renderizan como campos deshabilitados.
   El gris del tema no alcanza AA; se usa una mezcla del contenido sobre la
   superficie del documento, que mantiene contraste en ambos temas. */
.conto-invoice-capture :is(input, textarea):is(:disabled, [readonly]),
.conto-order-capture :is(input, textarea):is(:disabled, [readonly]),
.conto-transaction-capture :is(input, textarea):is(:disabled, [readonly]),
.conto-detail-capture :is(input, textarea):is(:disabled, [readonly]) {
    color: var(--conto-readonly);
    -webkit-text-fill-color: var(--conto-readonly);
    opacity: 1;
}

/* Las pestañas del área de trabajo no dibujan anillo de foco propio. */
.xaf-tabbed-mdi [role="tab"]:focus-visible,
.xaf-tabbed-mdi [role="tab"]:focus {
    outline: 2px solid var(--dxds-color-content-primary-default-rest, var(--bs-primary, #0f6cbd));
    outline-offset: -2px;
}

.conto-invoice-capture :is(input, textarea)[aria-invalid="true"],
.conto-order-capture :is(input, textarea)[aria-invalid="true"],
.conto-transaction-capture :is(input, textarea)[aria-invalid="true"],
.conto-detail-capture :is(input, textarea)[aria-invalid="true"] {
    border-color: var(--conto-danger);
}

/* Distribución: hasta 1199 px el resumen va debajo de las líneas; desde 1200 px
   va a la derecha con ancho fijo y queda visible al desplazarse. */
@media (max-width: 1199.98px) {
    .conto-invoice-body .conto-invoice-workspace,
    .conto-invoice-body .conto-invoice-sidebar,
    .conto-order-body .conto-order-lines,
    .conto-order-body .conto-order-summary,
    .conto-transaction-body .conto-transaction-lines,
    .conto-transaction-body .conto-transaction-summary {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .conto-invoice-sidebar,
    .conto-order-summary,
    .conto-transaction-summary {
        margin-block-start: .5rem;
    }
}

@media (min-width: 1200px) {
    .conto-invoice-body .conto-invoice-sidebar,
    .conto-order-body .conto-order-summary,
    .conto-transaction-body .conto-transaction-summary {
        flex: 0 0 var(--conto-summary-width);
        width: var(--conto-summary-width);
        max-width: var(--conto-summary-width);
        position: sticky;
        top: 1rem;
        align-self: flex-start;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    .conto-invoice-body .conto-invoice-workspace,
    .conto-order-body .conto-order-lines,
    .conto-transaction-body .conto-transaction-lines {
        flex: 1 1 calc(100% - var(--conto-summary-width) - 1.25rem);
        width: calc(100% - var(--conto-summary-width) - 1.25rem);
        max-width: calc(100% - var(--conto-summary-width));
    }
}

@media (prefers-reduced-motion: reduce) {
    .conto-invoice-capture *,
    .conto-order-capture *,
    .conto-transaction-capture *,
    .conto-detail-capture * {
        scroll-behavior: auto;
    }
}

/* =====================================================================
   Captura de productos (SalesProductCapturePanel)
   ===================================================================== */
.conto-product-capture { border: 0; padding: 0 0 12px; min-width: 0; }
.conto-product-search { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.conto-product-search input { flex: 1; min-width: 220px; background: var(--conto-surface); color: var(--conto-content); border-color: var(--conto-border); }
.conto-product-search input::placeholder { color: color-mix(in srgb, var(--conto-content) 55%, transparent); opacity: 1; }
.conto-product-search-hint, .conto-product-count { font-size: .875rem; opacity: .75; }
.conto-product-count { width: 100%; }
.conto-product-searching { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; opacity: .8; }
.conto-product-searching .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }
.conto-product-results { list-style: none; padding: 4px; margin: 8px 0 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--conto-border); border-radius: .375rem; background: var(--conto-surface); color: var(--conto-content); }
.conto-product-result-item { border-radius: .25rem; }
.conto-product-result-item.active { background: var(--conto-accent-surface); outline: 1px solid var(--conto-accent); }
.conto-product-results .btn-link { color: var(--conto-accent); text-decoration: none; text-align: start; width: 100%; }
.conto-product-results .btn-link:hover, .conto-product-results .btn-link:focus-visible { text-decoration: underline; }
.conto-product-result-btn { display: flex; flex-direction: column; gap: 2px; padding: .375rem .5rem; }
.conto-product-result-main { font-weight: 600; color: var(--conto-content); }
.conto-product-result-main mark { background: var(--conto-accent-surface); color: var(--conto-accent); padding: 0 1px; border-radius: 2px; }
.conto-product-result-meta { font-size: .8rem; opacity: .85; color: var(--conto-content); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.conto-product-badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 0 .45rem; border-radius: 999px; border: 1px solid var(--conto-border); background: var(--conto-surface); }
.conto-product-badge-danger { color: var(--conto-danger); border-color: var(--conto-danger); }
.conto-product-qty .conto-qty-btn { min-width: 2.5rem; font-weight: 700; }
.conto-field-error { color: var(--conto-danger); font-size: .8rem; margin-top: 4px; display: block; }
.conto-product-preview { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 0; font-size: .9rem; }
.conto-product-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px 20px; padding: 16px; background: color-mix(in srgb, var(--conto-accent) 4%, var(--conto-surface)); border: 1px solid var(--conto-border); border-radius: 6px; }
.conto-product-options > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.conto-product-options > label > span { font-size: .875rem; line-height: 1.35; min-height: 2.7em; }
.conto-product-options > label > input:not([type="checkbox"]),
.conto-product-options > label > select { box-sizing: border-box; width: 100%; min-width: 0; height: 36px; padding: 6px 10px; border: 1px solid var(--conto-border); border-radius: 4px; background: var(--conto-surface); color: var(--conto-content); font: inherit; }
.conto-product-options > label > input[type="checkbox"] { width: 18px; height: 18px; margin: 9px 0; accent-color: var(--conto-accent); }
.conto-product-options > label > input:disabled,
.conto-product-options > label > select:disabled { background: color-mix(in srgb, var(--conto-content) 8%, var(--conto-surface)); color: color-mix(in srgb, var(--conto-content) 60%, var(--conto-surface)); }
.conto-product-options-disabled { border-style: dashed; opacity: .9; }

/* =====================================================================
   Resumen de nómina (PayrollReviewSummary)
   ===================================================================== */
.conto-payroll-summary {
    margin-block-start: .75rem;
    padding: .75rem;
    border: 1px solid var(--conto-border);
    border-block-start: 3px solid var(--conto-accent);
    border-radius: .5rem;
    background: var(--conto-surface);
    color: var(--conto-content);
}
.conto-payroll-summary-title { font-weight: 700; margin-block-end: .5rem; }
.conto-payroll-summary-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: .5rem .75rem;
    margin: 0;
}
.conto-payroll-summary-values > div { min-width: 0; }
.conto-payroll-summary-values dt { font-size: .8rem; font-weight: 500; opacity: .8; }
.conto-payroll-summary-values dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.conto-payroll-balance { margin: .75rem 0 0; font-size: .875rem; font-weight: 600; }
.conto-payroll-balance.is-balanced { color: var(--dxds-color-content-success-default-rest, var(--bs-success-text-emphasis, #067647)); }
.conto-payroll-balance.is-unbalanced { color: var(--dxds-color-content-danger-default-rest, var(--bs-danger-text-emphasis, #B42318)); }

/* =====================================================================
   Semáforo de estados (DocumentStatusAppearance + StatusTone*Controller)

   El tono lo decide la regla; el color, el tema activo. Un color fijo no
   alcanza 4.5:1 sobre fondo claro y oscuro a la vez, por eso se usan los
   tokens del tema (Fluent) o los *-text-emphasis de Bootstrap, pensados
   para ambos modos. En listas se colorea la celda; en formularios, solo el
   editor (no la etiqueta).
   ===================================================================== */
.conto-tone-danger  { --conto-tone: var(--dxds-color-content-danger-default-rest,  var(--bs-danger-text-emphasis,  #B42318)); }
.conto-tone-success { --conto-tone: var(--dxds-color-content-success-default-rest, var(--bs-success-text-emphasis, #067647)); }
.conto-tone-warning { --conto-tone: var(--dxds-color-content-warning-default-rest, var(--bs-warning-text-emphasis, #B54708)); }
.conto-tone-final   { --conto-tone: var(--dxds-color-content-primary-default-rest, var(--bs-primary-text-emphasis, #175CD3)); }

td:is(.conto-tone-danger, .conto-tone-success, .conto-tone-warning, .conto-tone-final) {
    color: var(--conto-tone);
    font-weight: 600;
}

:is(.conto-tone-danger, .conto-tone-success, .conto-tone-warning, .conto-tone-final):not(td) :is(input, textarea) {
    color: var(--conto-tone);
    -webkit-text-fill-color: var(--conto-tone);
    font-weight: 600;
}

/* El color no es la única señal: las reglas con etiqueta (p. ej. «Vencida») la muestran junto al valor. */
td[data-conto-label]::after {
    content: " · " attr(data-conto-label);
    font-weight: 600;
}

/* Capture sizes use the available content width. From 1000px (1366 with the menu open)
   the summary sits beside the lines so the total stays in view. */
.conto-order-capture,
.conto-invoice-capture,
.conto-transaction-capture {
    container-type: inline-size;
    --conto-summary-width: 260px;
}
.conto-order-body .conto-order-lines,
.conto-order-body .conto-order-summary,
.conto-invoice-body .conto-invoice-workspace,
.conto-invoice-body .conto-invoice-sidebar,
.conto-transaction-body .conto-transaction-lines,
.conto-transaction-body .conto-transaction-summary {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
}
@container (min-width: 1000px) {
    .conto-order-body .conto-order-summary,
    .conto-invoice-body .conto-invoice-sidebar,
    .conto-transaction-body .conto-transaction-summary {
        flex: 0 0 var(--conto-summary-width);
        width: var(--conto-summary-width);
        max-width: var(--conto-summary-width);
    }
    .conto-order-body .conto-order-lines,
    .conto-invoice-body .conto-invoice-workspace,
    .conto-transaction-body .conto-transaction-lines {
        flex: 1 1 calc(100% - var(--conto-summary-width) - 1rem);
        width: calc(100% - var(--conto-summary-width) - 1rem);
        max-width: calc(100% - var(--conto-summary-width));
    }
}
.conto-product-quick {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(220px, 300px);
    gap: .5rem 1rem;
    padding: .5rem 0;
    margin: 0;
    border: 0;
    min-width: 0;
}
.conto-product-quick label { display: flex; flex-direction: column; gap: .25rem; }
.conto-product-quick .input-group { display: flex; flex-wrap: nowrap; }
.conto-product-quick input { min-width: 0; width: 100%; }
@media (max-width: 767.98px) {
    .conto-product-quick { grid-template-columns: minmax(0, 1fr); }
}

.conto-order-summary,
.conto-invoice-summary,
.conto-transaction-summary { container-type: inline-size; }
@container (min-width: 600px) {
    .conto-sales-summary-value,
    .conto-transaction-summary-value,
    .conto-transaction-final-total,
    .conto-order-final-total,
    .conto-invoice-final-total {
        flex: 0 0 25%;
        width: 25%;
        max-width: 25%;
        box-sizing: border-box;
        margin-block: 0;
    }
}

/* Actions with a reason/reference input keep a readable editor in "Más acciones". */
.dxbl-toolbar-dropdown-item .parametrized-action-wrapper { min-width: 20rem; }
.dxbl-toolbar-dropdown-item .parametrized-action-wrapper .dxbl-text-edit-input { min-width: 8rem; }
.dxbl-toolbar-dropdown-item .parametrized-action-caption {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

/* =====================================================================
   «Inicio» (Editors/HomeBoard.razor): datos del día y ciclos de trabajo.
   Cada paso es una tarjeta con flecha hacia el siguiente; en pantallas
   angostas los pasos bajan de fila y la flecha se conserva.
   ===================================================================== */
.conto-home {
    --conto-surface: var(--dxds-color-surface-neutral-default-rest, var(--bs-body-bg, Canvas));
    --conto-content: var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, CanvasText));
    --conto-border: var(--dxds-color-border-neutral-default-rest, var(--bs-border-color, currentColor));
    --conto-accent: var(--dxds-color-content-primary-default-rest, var(--bs-primary, LinkText));
    --conto-accent-surface: var(--dxds-color-surface-primary-subdued-rest, color-mix(in srgb, var(--conto-accent) 10%, var(--conto-surface)));
    --conto-muted: color-mix(in srgb, var(--conto-content) 60%, var(--conto-surface));
    color: var(--conto-content);
    padding: .25rem 0 1rem;
}
.conto-home-greeting { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 600; }
.conto-home-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: .75rem;
    margin-block-end: 1.5rem;
}
.conto-home-fact {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--conto-content) 4%, var(--conto-surface));
}
.conto-home-fact-label { font-size: .8rem; color: var(--conto-muted); }
.conto-home-fact-value { font-weight: 600; overflow-wrap: anywhere; }
.conto-home-fact-value::first-letter { text-transform: uppercase; }
.conto-home-flow-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }
.conto-home-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .75rem 0;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
.conto-home-step { display: flex; flex: 1 1 0; align-items: center; min-width: 6.5rem; max-width: 12rem; }
.conto-home-step + .conto-home-step { min-width: 8rem; max-width: 14rem; }
.conto-home-step + .conto-home-step::before {
    content: "";
    flex: 0 0 1.25rem;
    height: 2px;
    margin-inline: .25rem;
    background: var(--conto-border);
}
.conto-home-step-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 6.5rem;
    padding: .75rem .5rem;
    border: 1px solid var(--conto-border);
    border-radius: .75rem;
    background: var(--conto-surface);
    color: inherit;
    font: inherit;
    font-size: .875rem;
    text-align: center;
    line-height: 1.25;
}
.conto-home-step + .conto-home-step .conto-home-step-card::before {
    content: "";
    position: absolute;
    inset-inline-start: -.55rem;
    top: 50%;
    border-block: .35rem solid transparent;
    border-inline-start: .45rem solid var(--conto-border);
    transform: translateY(-50%);
}
.conto-home-step-card img { width: 2rem; height: 2rem; }
button.conto-home-step-card { cursor: pointer; }
button.conto-home-step-card:hover {
    border-color: var(--conto-accent);
    background: var(--conto-accent-surface);
}
button.conto-home-step-card:focus-visible {
    outline: 2px solid var(--conto-accent);
    outline-offset: 2px;
}
.conto-home-step-card.is-unavailable {
    border-style: dashed;
    color: var(--conto-muted);
    cursor: default;
}
.conto-home-step-card.is-unavailable img { opacity: .4; filter: grayscale(1); }
.conto-home-empty { color: var(--conto-muted); }