:root {
    --if-primary: #4f7c82;
    --if-primary-dark: #0b2e32;
    --if-primary-light: #72a1a7;
    --if-accent: #3f6368;
    --if-white: #ffffff;
    --if-gray-light: #f8f9fa;
    --if-danger: #dc3545;
    /* --if-font-main: 'Indivisible', sans-serif; */
    --if-font-main: 'Inter', sans-serif;

    --asg-btn-regresar: #127369;
    --asg-btn-submit: #10403b;
    --asg-btn-editar: #8aa6a3;
    --asg-btn-seg-b: #4c5958;
    --asg-btn-seg-c: #bfbfbf;
    --asg-btn-canceled: #ef5d52;
    --asg-btn-pdf: #5b8694;
    --asg-btn-excel: #1d7045;
    --asg-btn-paid:  #4ea96b;
    --asg-shadow: #0b2e32;

    --asg-border-light: #e6e6e6;
    --asg-text-muted: #b3b3b3;
    --asg-bg-disabled: #e6e6e6;
    --asg-select-focus: #5f8f8a;
    --asg-select-focus-ring: rgba(95, 143, 138, 0.16);
    --asg-select-option-active: #e7f0ef;
}

/* La fuente base vivia solo en el <style> de _Layout, de modo que las paginas
   con Layout = null (login, recuperacion de clave, selector de sucursal) nunca
   la heredaban y caian a la sans-serif del sistema. Declararla aqui las alinea
   con el resto del ERP y con el CRM. Sin font-size a proposito: esas pantallas
   se diseniaron sobre los 16px por omision y cambiarlo las descuadraria. */
html, body {
    font-family: var(--if-font-main);
}


.asg-input-container {
    margin-bottom: 25px;
    width: 100%;
}

.asg-input-field {
    display: block;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    border: 3px solid var(--asg-shadow);
    background-color: var(--if-white);
    box-shadow: 10px 10px 0px var(--asg-shadow);
    font-size: 16px;
    font-weight: 400;
    color: var(--asg-shadow);
    padding: 15px 25px;
    outline: none;
    transition: box-shadow 0.05s ease-in-out, transform 0.05s ease-in-out;
    box-sizing: border-box;
}

.asg-input-field::placeholder {
    color: #a0a0a0;
    font-weight: 400;
}

.asg-input-field:focus {
    box-shadow: 5px 5px 0px var(--asg-shadow);
    transform: translate(5px, 5px);
}

.asg-error-text {
    display: block;
    margin-top: 10px;
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--if-danger);
}

.login-btn {
    background-color: var(--asg-btn-editar);
    color: var(--if-white);
    border: 3px solid var(--asg-shadow);
    font-weight: 800;
    padding: 15px 45px;
    border-radius: 5px;
    box-shadow: 10px 10px 0px var(--asg-shadow);
    transition: box-shadow 0.05s ease-in-out, transform 0.05s ease-in-out;
    width: fit-content;
    margin: 20px auto 0;
    text-transform: uppercase;
    font-size: 1.2rem;
    cursor: pointer;
}

.login-btn:active {
    box-shadow: 0px 0px 0px var(--asg-shadow);
    transform: translate(10px, 10px);
}

/* --- Recuperar Contraseña --- */
.main-card-recovery {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #d1d9df;
    padding: 20px;
}

.recovery-container {
    text-align: center;
    width: 100%;
    max-width: 650px;
    font-family: var(--if-font-main);
}

.recovery-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--asg-shadow);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.recovery-box {
    background-color: var(--if-white);
    border: 3px solid var(--asg-shadow);
    padding: 50px;
    border-radius: 10px;
    box-shadow: 15px 15px 0px var(--asg-shadow);
    text-align: left;
}

.recovery-text {
    font-size: 1.15rem;
    color: var(--asg-shadow);
    margin-bottom: 35px;
    font-weight: 500;
    line-height: 1.6;
}

.recovery-box .asg-input-container {
    margin-bottom: 35px;
}

.recovery-box .text-center {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.back-to-login {
    margin-top: 35px;
}

.back-to-login .forgot-link {
    text-decoration: none;
    color: var(--asg-shadow);
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.back-to-login .forgot-link:hover {
    color: var(--if-primary);
}

/* --- Botones ASG --- */
.btn-asg {
    border: none;
    font-weight: 700;
    color: var(--if-white);
    padding: 10px 25px;
    border-radius: 4px;
    text-transform: uppercase;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 0px 0px transparent;
    text-decoration: none;
}

.btn-asg-submit {
    background-color: var(--asg-btn-submit);
}

.btn-asg-edit {
    background-color: var(--asg-btn-editar);
}

.btn-asg-segb {
    background-color: var(--asg-btn-seg-b);
}

.btn-asg-segc {
    background-color: var(--asg-btn-seg-c);
}

.btn-asg-back {
    background-color: var(--asg-btn-regresar);
}

.btn-asg-canceled {
    background-color: var(--asg-btn-canceled);
}

.btn-asg-pdf {
    background-color: var(--asg-btn-pdf);
}

.btn-asg-excel {
    background-color: var(--asg-btn-excel);
}

.btn-asg-paid {
    background-color: var(--asg-btn-paid);
}

.btn-asg-canceled:disabled,
.btn-asg-canceled.disabled,
.btn-asg-canceled[aria-disabled="true"] {
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

.btn-asg-canceled:disabled:hover,
.btn-asg-canceled.disabled:hover,
.btn-asg-canceled[aria-disabled="true"]:hover {
    box-shadow: 0px 0px 0px transparent;
    transform: none;
}

.btn-asg:hover {
    box-shadow: 0px 6px 0px var(--asg-shadow);
    transform: translateY(-4px);
    color: var(--if-white);
}

.btn-asg:active {
    box-shadow: 0px 2px 0px var(--asg-shadow);
    transform: translateY(-1px);
}

.btn-asg-input-aligned {
    width: 100%;
    min-height: 41px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.2;
    box-shadow: none;
    transform: none;
}

.btn-asg-input-aligned:hover,
.btn-asg-input-aligned:active {
    box-shadow: none;
    transform: none;
}

@media (max-width: 1365.98px) {
    .asg-list-toolbar {
        row-gap: 12px;
    }

    .asg-list-toolbar > [class*="col-"] {
        width: 100%;
    }

    .asg-list-toolbar__actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        width: 100%;
    }

    .asg-list-toolbar__actions .btn-asg,
    .asg-list-toolbar__actions .dropdown {
        width: 100%;
        min-width: 0;
    }

    .asg-list-toolbar__actions .btn-asg {
        min-height: 42px;
        padding: 10px 12px;
        font-size: 0.82rem;
        line-height: 1.15;
        box-shadow: none;
        transform: none;
    }

    .asg-list-toolbar__actions .btn-asg:hover,
    .asg-list-toolbar__actions .btn-asg:active {
        box-shadow: none;
        transform: none;
    }

    .asg-list-toolbar__actions .dropdown {
        grid-column: 1 / -1;
    }
}

/* --- Botón Back circular --- */
.asg-btn-back-circle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition-duration: 0.3s;
    box-shadow: 4px 4px 0px var(--asg-shadow);
    background-color: var(--asg-btn-regresar);
}

.asg-btn-back-circle__sign {
    width: 100%;
    transition-duration: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asg-btn-back-circle__sign svg {
    width: 18px;
}

.asg-btn-back-circle__sign svg path {
    fill: var(--if-white);
}

.asg-btn-back-circle__text {
    position: absolute;
    right: 0%;
    width: 0%;
    opacity: 0;
    color: var(--if-white);
    font-family: var(--if-font-main);
    font-size: 0.9em;
    font-weight: 700;
    transition-duration: 0.3s;
    text-transform: uppercase;
}

/* --- Botón Logout circular --- */
.asg-btn-logout-circle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition-duration: 0.3s;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
    background-color: var(--asg-btn-regresar);
}

.asg-btn-logout-circle__sign {
    width: 100%;
    transition-duration: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asg-btn-logout-circle__sign svg {
    width: 18px;
}

.asg-btn-logout-circle__sign svg path {
    fill: var(--if-white);
}

.asg-btn-logout-circle__text {
    position: absolute;
    right: 0%;
    width: 0%;
    opacity: 0;
    color: var(--if-white);
    font-family: var(--if-font-main);
    font-size: 0.8rem;
    font-weight: 700;
    transition-duration: 0.3s;
    text-transform: uppercase;
}

.asg-btn-logout-circle:hover {
    width: 110px;
    border-radius: 5px;
    transition-duration: 0.3s;
}

.asg-btn-logout-circle:hover .asg-btn-logout-circle__sign {
    width: 30%;
    transition-duration: 0.3s;
    padding-left: 10px;
}

.asg-btn-logout-circle:hover .asg-btn-logout-circle__text {
    opacity: 1;
    width: 70%;
    transition-duration: 0.3s;
    padding-right: 5px;
}

.asg-btn-logout-circle:active {
    transform: translate(2px, 2px);
}

/* --- Welcome Banner --- */
.welcome-banner {
    position: relative;
    background-color: var(--asg-shadow);
    border-radius: 12px;
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    color: var(--if-white);
    min-height: 120px;
}

.welcome-banner-bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    opacity: 0.08;
    z-index: 1;
}

.welcome-banner-bg img {
    height: 180%;
    transform: translate(10%, 0);
    object-fit: cover;
}

.welcome-content-left {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.welcome-date {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

.welcome-greeting {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.welcome-greeting strong {
    font-weight: 700;
}

.welcome-badge {
    background-color: var(--if-white);
    color: var(--asg-shadow);
    padding: 5px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 4px;
}

.welcome-content-right {
    position: relative;
    z-index: 2;
}

.client-logo {
    height: 65px;
    object-fit: contain;
}

/* --- Inputs ASG --- */
.asg-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--asg-shadow);
    background-color: var(--if-white);
    border: 1px solid var(--asg-border-light);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.asg-input::placeholder {
    color: var(--asg-text-muted);
}

.asg-input:focus {
    border-color: var(--asg-shadow);
    box-shadow: 0 0 0 3px rgba(11, 46, 50, 0.1);
}

.asg-input-readonly,
.asg-input[readonly],
.asg-input:disabled {
    background-color: var(--asg-bg-disabled);
    color: var(--asg-shadow);
    cursor: not-allowed;
}

.asg-input-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2e32' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

.asg-input-select:focus {
    border-color: var(--asg-select-focus);
    box-shadow: 0 0 0 3px var(--asg-select-focus-ring);
    outline: none;
}

.asg-input-select option:checked {
    background-color: var(--asg-select-option-active);
    color: var(--asg-shadow);
}

.asg-input-number,
.asg-input-decimal {
    text-align: right;
}

.asg-field {
    margin-bottom: 16px;
}

.asg-field > label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--asg-shadow);
    margin-bottom: 6px;
}

/* --- ASG Checkbox & Toggle --- */
.asg-choice-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.asg-choice-field--compact {
    align-items: center;
    margin-bottom: 0;
}

/* Alinea el control con el centro vertical de un input que tiene etiqueta arriba. */
.asg-choice-field--input-aligned {
    padding-top: 23px;
}

@media (max-width: 767.98px) {
    .asg-choice-field--input-aligned {
        padding-top: 0;
    }
}

.asg-checkbox-control,
.asg-toggle-control {
    align-items: center;
    color: var(--asg-shadow);
    cursor: pointer;
    display: inline-flex;
    gap: 12px;
    line-height: 1.2;
    min-height: 42px;
    user-select: none;
    width: fit-content;
}

.asg-checkbox-control__input,
.asg-toggle-control__input {
    border: 0 !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    position: absolute !important;
    width: 1px !important;
}

.asg-choice-field .asg-checkbox-control,
.asg-choice-field .asg-toggle-control {
    display: inline-flex;
    margin: 0;
    overflow: visible;
    white-space: normal;
}

.asg-checkbox-control__mark {
    background-color: var(--asg-bg-disabled);
    border: 2px solid var(--asg-shadow);
    border-radius: 5px;
    box-shadow: 4px 4px 0 var(--asg-shadow);
    flex: 0 0 auto;
    height: 30px;
    position: relative;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
    width: 30px;
}

.asg-checkbox-control__mark::after {
    border: solid var(--if-white);
    border-width: 0 3px 3px 0;
    content: "";
    display: none;
    height: 15px;
    left: 9px;
    position: absolute;
    top: 3px;
    transform: rotate(45deg);
    width: 8px;
}

.asg-checkbox-control__input:checked + .asg-checkbox-control__mark {
    background-color: var(--asg-btn-regresar);
}

.asg-checkbox-control__input:checked + .asg-checkbox-control__mark::after {
    display: block;
}

.asg-toggle-control__slider {
    background-color: var(--asg-bg-disabled);
    border: 2px solid var(--asg-shadow);
    border-radius: 6px;
    box-shadow: 4px 4px 0 var(--asg-shadow);
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 24px;
    position: relative;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
    width: 54px;
}

.asg-toggle-control__slider::before {
    background-color: var(--if-white);
    border: 2px solid var(--asg-shadow);
    border-radius: 5px;
    bottom: 2px;
    box-shadow: 0 3px 0 var(--asg-shadow);
    box-sizing: border-box;
    content: "";
    height: 20px;
    left: -2px;
    position: absolute;
    transition: transform .2s ease;
    width: 20px;
}

.asg-toggle-control__input:checked + .asg-toggle-control__slider {
    background-color: var(--asg-btn-regresar);
}

.asg-toggle-control__input:checked + .asg-toggle-control__slider::before {
    transform: translateX(32px);
}

.asg-checkbox-control__input:focus-visible + .asg-checkbox-control__mark,
.asg-toggle-control__input:focus-visible + .asg-toggle-control__slider {
    outline: 3px solid rgba(18, 115, 105, .22);
    outline-offset: 4px;
}

.asg-checkbox-control:hover .asg-checkbox-control__mark,
.asg-toggle-control:hover .asg-toggle-control__slider {
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 var(--asg-shadow);
}

.asg-choice-control--disabled {
    cursor: not-allowed;
    opacity: .68;
}

.asg-choice-field__label {
    color: var(--asg-shadow);
    font-size: 14px;
    font-weight: 700;
}

/* --- ASG Validation Summary --- */
.asg-validation-summary {
    margin: 0 0 16px;
    padding: 12px 14px 12px 16px;
    color: #7f1d1d;
    background: #fff7f7;
    border: 1px solid #fecaca;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04);
}

.asg-validation-summary__content {
    min-width: 0;
}

.asg-validation-summary__title {
    display: block;
    margin-bottom: 3px;
    color: #b91c1c;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.25;
}

.asg-validation-summary__title:last-child {
    margin-bottom: 0;
}

.asg-validation-summary__list {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #991b1b;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
}

.asg-validation-summary__list li + li {
    margin-top: 3px;
}

@media (max-width: 575.98px) {
    .asg-validation-summary {
        padding: 11px 12px 11px 14px;
    }
}

/* --- TomSelect --- */
.ts-wrapper.asg-input {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
}

.ts-wrapper.asg-input .ts-control {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--asg-shadow);
    background-color: var(--if-white);
    border: 1px solid var(--asg-border-light);
    border-radius: 6px;
    box-shadow: none;
    min-height: auto;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ts-wrapper.single .ts-control {
    padding-right: 36px !important;
    flex-wrap: nowrap;
}

/* El valor elegido ocupa una sola linea: en una columna angosta se corta con «…»
   en vez de hacer crecer el campo. El texto completo sigue en el desplegable. */
.ts-wrapper.single .ts-control > .item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-wrapper.single .ts-control::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.8;
    pointer-events: none;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.16s ease, margin-top 0.16s ease;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    margin-top: -1px;
    transform: rotate(225deg);
}

.ts-wrapper.asg-input .ts-control > input {
    color: var(--asg-shadow);
    font-size: 14px;
}

.ts-wrapper.asg-input .ts-control > input::placeholder {
    color: var(--asg-text-muted);
}

.ts-wrapper.asg-input.focus .ts-control {
    border-color: var(--asg-select-focus);
    box-shadow: 0 0 0 3px var(--asg-select-focus-ring);
}

.ts-wrapper.asg-input.disabled .ts-control {
    background-color: var(--asg-bg-disabled);
    color: var(--asg-shadow);
    cursor: not-allowed;
    opacity: 1;
}

/* --- TomSelect: selección múltiple (<asg-multi-select>) ---
   Las fichas se pintan con las mismas variables que el resto del control, así que
   siguen al tema claro/oscuro sin reglas duplicadas. El control crece en alto a
   medida que se agregan fichas en vez de recortarlas. */
.ts-wrapper.multi.asg-input .ts-control {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 7px 10px;
}

.ts-wrapper.multi.asg-input .ts-control > .item {
    align-items: center;
    background-color: var(--asg-select-option-active);
    border: 1px solid var(--asg-border-light);
    border-radius: 999px;
    color: var(--asg-shadow);
    display: inline-flex;
    font-size: 13px;
    gap: 6px;
    line-height: 1.3;
    margin: 0;
    padding: 3px 9px;
}

.ts-wrapper.multi.asg-input .ts-control > .item.active {
    border-color: var(--asg-select-focus);
    box-shadow: 0 0 0 2px var(--asg-select-focus-ring);
}

/* El plugin remove_button fuerza padding-right: 0 en la ficha con !important, lo
   que deja el aspa pegada al borde derecho; se repone con la misma prioridad. */
.ts-wrapper.plugin-remove_button.multi.asg-input .ts-control > .item {
    padding-right: 9px !important;
}

/* El aspa se dibuja con dos barras cruzadas en vez de usar el carácter de la
   fuente. Centrar el glifo no alcanza: el signo de multiplicar se apoya en el eje
   matemático de la tipografía, así que queda por debajo del centro de su caja y el
   desvío cambia según la fuente. Con dos barras posicionadas al 50% el centrado es
   geométrico y no depende de nada. */
.ts-wrapper.multi.asg-input .ts-control > .item > .remove {
    border: none;
    border-radius: 999px;
    color: var(--asg-text-muted);
    display: inline-block;
    font-size: 0;
    height: 14px;
    line-height: 0;
    margin-left: 0;
    padding: 0;
    position: relative;
    text-decoration: none;
    transition: color .15s ease;
    width: 14px;
}

.ts-wrapper.multi.asg-input .ts-control > .item > .remove::before,
.ts-wrapper.multi.asg-input .ts-control > .item > .remove::after {
    background-color: currentColor;
    border-radius: 1px;
    content: "";
    height: 1.3px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 9px;
}

.ts-wrapper.multi.asg-input .ts-control > .item > .remove::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ts-wrapper.multi.asg-input .ts-control > .item > .remove::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.ts-wrapper.multi.asg-input .ts-control > .item > .remove:hover {
    background-color: transparent;
    color: var(--if-danger);
}

.ts-wrapper.multi.asg-input .ts-control > input {
    flex: 1 1 60px;
    margin: 0;
    min-width: 60px;
}

.ts-wrapper.multi.asg-input.disabled .ts-control > .item > .remove {
    display: none;
}

/* Sin selección el control debe verse igual de alto que uno simple. */
.ts-wrapper.multi.asg-input .ts-control:not(.has-items) {
    padding: 10px 14px;
}

/* El <select> original que TomSelect deja oculto conserva position: absolute con
   top/left automáticos, o sea su posición estática. Dentro de una tabla que scrollea
   por dentro de un panel esos selects quedan cientos de píxeles por debajo del
   viewport y estiran el área de scroll del DOCUMENTO: la página entera se desplazaba
   detrás del encabezado fijo y quedaba un hueco vacío sobre el pie. Anclarlos en el
   origen de su .ts-wrapper (que es position: relative) los deja donde ya está el
   control —sin cambiar nada visible ni de accesibilidad— y devuelve el scroll al
   único sitio que debe tenerlo: el cuerpo del panel. */
.ts-hidden-accessible {
    top: 0 !important;
    left: 0 !important;
    height: 1px !important;
}

.ts-dropdown {
    border: 1px solid var(--asg-border-light);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: var(--asg-shadow);
    font-size: 14px;
    margin-top: 4px;
    z-index: 1085;
}

/* Desplegable volteado hacia arriba cuando no cabe debajo del control (site.js).
   El hueco lo aplica el propio cálculo del top, no el margen. */
.ts-dropdown--above {
    margin-top: 0;
}

.ts-dropdown .option {
    padding: 10px 14px;
}

.ts-dropdown .active {
    background-color: var(--asg-select-option-active);
    color: var(--asg-shadow);
}

.ts-dropdown .option.selected {
    background-color: rgba(95, 143, 138, 0.12);
    color: var(--asg-shadow);
}

.plugin-dropdown_input .dropdown-input {
    color: var(--asg-shadow);
    border-bottom-color: var(--asg-border-light);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.plugin-dropdown_input .dropdown-input:focus {
    border-bottom-color: var(--asg-select-focus);
    box-shadow: inset 0 -1px 0 var(--asg-select-focus);
    outline: none;
}

/* --- ASG Tabs --- */
.asg-tabs-wrapper {
    margin-bottom: 1rem;
}

.asg-tabs-nav {
    display: flex;
    border-bottom: 1px solid #dee2e6;
}

.asg-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--asg-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-bottom-color 0.15s;
    margin-bottom: -1px;
    font-family: inherit;
    white-space: nowrap;
}

.asg-tab-btn:hover:not(.active) {
    color: var(--if-primary);
}

.asg-tab-btn.active {
    color: var(--if-primary-dark);
    border-bottom-color: var(--if-primary-dark);
    font-weight: 600;
}

.asg-tab-pane {
    padding: 1rem 0;
}

/* --- ASG Tables --- */
.asg-table-wrapper {
    width: 100%;
    overflow-x: auto;
    background-color: var(--if-white);
}

.asg-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
    font-size: 0.875rem;
    color: #1f2937;
    margin-bottom: 0;
}

.asg-table thead th {
    padding: 0.8rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--asg-shadow);
    white-space: nowrap;
    border-bottom: 1px solid var(--asg-border-light);
    background-color: var(--if-white);
}

.asg-table__th--center {
    text-align: center !important;
}

/* --- Listas ASG: encabezado fijo y acciones directas --- */
/* El orden se gestiona desde los encabezados de tabla; oculta los menús legacy de ordenamiento. */
.dropdown:has(.dropdown-menu .dropdown-item[href*="sortOrder"]),
.dropdown:has(.dropdown-menu .dropdown-item[href*="sortorder"]),
.dropdown:has(.dropdown-menu .dropdown-item[href*="orderBy"]),
.dropdown:has(.dropdown-menu .dropdown-item[href*="orderby"]) {
    display: none !important;
}

@media (min-width: 1366px) {
    .card-body .asg-table-wrapper {
        overflow: visible;
    }

    /* Las listas conservan su ancho aunque un valor contenga texto muy largo. */
    .card-body .asg-table-wrapper .asg-table {
        table-layout: fixed;
    }

    .card-body .asg-table-wrapper .asg-table thead th {
        position: sticky;
        top: 0;
        z-index: 4;
        background: var(--if-white);
        box-shadow: 0 1px 0 var(--asg-border-light);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card-body .asg-table-wrapper .asg-table tbody td:not(.asg-table__cell--nowrap):not(.asg-table__cell--end) {
        overflow-wrap: anywhere;
    }

    .card-body .asg-table-wrapper .asg-table tbody td[data-label^="Ref."] {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .card-body .asg-table-wrapper .asg-table thead th:last-child,
    .card-body .asg-table-wrapper .asg-table tbody td[data-label="Acción"] {
        width: 11rem;
        min-width: 11rem;
        overflow: visible;
    }

    /* Mantiene visible el identificador del registro al desplazar una lista horizontalmente. */
    .card-body .asg-table-wrapper .asg-table thead th:first-child {
        left: 0;
        z-index: 6;
        box-shadow: 2px 0 0 var(--asg-border-light);
    }

    .card-body .asg-table-wrapper .asg-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 2px 0 0 var(--asg-border-light);
    }

    .card-body .asg-table-wrapper .asg-table tbody tr:nth-child(odd) > td:first-child {
        background-color: #f3f4f6;
    }

    .card-body .asg-table-wrapper .asg-table tbody tr:nth-child(even) > td:first-child {
        background-color: var(--if-white);
    }

    .card-body .asg-table-wrapper .asg-table tbody tr:hover > td:first-child {
        box-shadow: 2px 0 0 var(--asg-border-light), inset 1px 0 0 #789a99, inset 0 1px 0 #789a99, inset 0 -2px 0 #789a99;
        border-radius: 6px 0 0 6px;
    }

    /* La columna reserva 11rem y su encabezado va centrado: los botones se
       centran con el para que todas las listas se lean igual. */
    .card-body .asg-table-wrapper .asg-table tbody td[data-label="Acción"] .asg-inline-actions {
        flex-wrap: nowrap;
        justify-content: center;
        max-width: none;
    }
}

.asg-inline-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    white-space: nowrap;
}

.asg-inline-action {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    font-size: .95rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(11, 46, 50, .28);
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.asg-inline-action:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 0 var(--asg-shadow);
    color: #ffffff;
}

.asg-inline-action:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 0 var(--asg-shadow);
}

.asg-inline-action:focus-visible {
    outline: 2px solid #5f8f8a;
    outline-offset: 2px;
}

.asg-inline-action--view { background: var(--asg-btn-regresar); }
.asg-inline-action--view:hover { background: #0f6259; }
.asg-inline-action--edit { background: var(--asg-btn-editar); }
.asg-inline-action--edit:hover { background: #789894; }
.asg-inline-action--danger { background: var(--asg-btn-canceled); }
.asg-inline-action--danger:hover { background: #da4f46; }
.asg-inline-action--success { background: var(--asg-btn-excel); }
.asg-inline-action--success:hover { background: #185e3b; }
.asg-inline-action--document { background: var(--asg-btn-pdf); }
.asg-inline-action--document:hover { background: #496f7c; }

.asg-inline-action--secondary { background: var(--asg-btn-seg-b); }
.asg-inline-action--secondary:hover { background: #3f4c4b; }

.asg-inline-action .fa-toggle-on,
.asg-inline-action .fa-toggle-off {
    font-size: 1.16em;
    color: #ffffff !important;
    opacity: 1 !important;
}

@media (max-width: 1365.98px) {
    .asg-inline-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .asg-inline-action {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}

.asg-table tbody td {
    padding: 0.8rem 1rem;
    vertical-align: middle;
    color: #374151;
    border: none;
}

.col-cantidad-tipo-venta {
    display: none !important;
}

.asg-table__cell--center {
    text-align: center;
}

.asg-table__cell--end {
    text-align: right;
    white-space: nowrap;
}

.asg-table__cell--nowrap {
    white-space: nowrap;
}

/* Celdas con dato principal + dato subordinado (ej. usuario y su UserId).
   Los tamanos van en em para seguir escalando con la regla de "letra mas
   grande en listas" de mas abajo. --asg-text-muted ya conmuta en tema oscuro. */
.asg-table__cell-main {
    display: block;
}

.asg-table__cell-sub {
    display: block;
    font-size: .78em;
    color: var(--asg-text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: .1rem;
    overflow-wrap: anywhere;
}

/* Texto largo y secundario (ej. User-Agent): legible pero sin competir.
   Lleva tbody td para superar a la regla de "letra más grande en listas"
   (.card .asg-table td, más abajo): con solo "td" empata en especificidad y,
   al estar declarada antes en el archivo, perdería. */
.asg-table tbody td.asg-table__cell--fine {
    font-size: .78rem;
    color: var(--asg-text-muted);
    line-height: 1.3;
}

.asg-money {
    color: var(--asg-shadow);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Tablas de vista de lista: letra y números un poco más grandes para mejor
   legibilidad. Cubre las listas dentro de un .card, los libros/estados contables
   y las listas que NO usan .card (movimientos bancarios, bitácora de cambios,
   kardex, asignación de licencias). No afecta las tablas de captura de documentos
   (#ifdevtabletv, .journal-lines-table), que conservan su tamaño de trabajo. */
.card .asg-table, .card .asg-table th, .card .asg-table td,
.accounting-book-view .asg-table, .accounting-book-view .asg-table th, .accounting-book-view .asg-table td,
.bank-movements-view .asg-table, .bank-movements-view .asg-table th, .bank-movements-view .asg-table td,
.audit-page .asg-table, .audit-page .asg-table th, .audit-page .asg-table td,
.kardex-detail-view .asg-table, .kardex-detail-view .asg-table th, .kardex-detail-view .asg-table td,
.license-table-shell .asg-table, .license-table-shell .asg-table th, .license-table-shell .asg-table td,
.material-request-list-view .asg-table, .material-request-list-view .asg-table th, .material-request-list-view .asg-table td {
    font-size: 0.95rem;
}

/* Fila clicable. El enlace real vive en la primera celda y es el destino accesible;
   el clic sobre el resto de la fila lo agrega asg-row-link.js como comodidad. */
.asg-table tbody tr.asg-row-link {
    cursor: pointer;
}

.asg-table tbody tr.asg-row-link:focus-within > td {
    background: rgba(79, 124, 130, 0.10);
}

.asg-table tbody tr.asg-row-link:focus-within > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--if-primary);
}

/* Tira de filtros activos de los listados. Cada chip enlaza a la misma vista sin
   ese filtro, para poder ampliar la busqueda sin abrir el modal. */
.asg-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 0;
}

.asg-active-filters__label {
    color: var(--asg-shadow);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.75;
}

.asg-active-filters__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 8px 5px 13px;
    color: var(--asg-shadow);
    background: rgba(79, 124, 130, 0.09);
    border: 1px solid rgba(79, 124, 130, 0.22);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* En rojo al apuntarlo, para que se entienda que el clic quita el filtro. */
.asg-active-filters__chip:hover,
.asg-active-filters__chip:focus-visible {
    color: var(--if-danger);
    background: rgba(220, 53, 69, 0.10);
    border-color: rgba(220, 53, 69, 0.34);
}

/* La "x" se centra opticamente dentro de su propio circulo. */
.asg-active-filters__chip span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.55;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.asg-active-filters__chip:hover span[aria-hidden],
.asg-active-filters__chip:focus-visible span[aria-hidden] {
    background: rgba(220, 53, 69, 0.16);
    opacity: 1;
}

@media (max-width: 1365.98px) {
    .asg-active-filters__label {
        flex: 0 0 100%;
    }
}

.asg-table__link {
    color: var(--asg-shadow);
    font-weight: 600;
    text-decoration: none;
    display: block;
}

.asg-table__link:hover {
    color: var(--if-primary);
}

.asg-table__link--document {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 5px 10px;
    color: var(--asg-shadow);
    background: rgba(18, 115, 105, 0.07);
    border: 1px solid rgba(18, 115, 105, 0.16);
    border-radius: 999px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.asg-table__link--document::after {
    content: "→";
    color: var(--if-primary);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.asg-table__link--document:hover,
.asg-table__link--document:focus {
    color: var(--if-primary);
    background: rgba(18, 115, 105, 0.12);
    border-color: rgba(18, 115, 105, 0.24);
}

.asg-table__link--document:hover::after,
.asg-table__link--document:focus::after {
    opacity: 1;
    transform: translateX(1px);
}

@media (max-width: 768px) {
    .asg-table__link--document {
        font-size: 0.78rem;
        gap: 3px;
        padding: 4px 7px;
    }

    .asg-table__link--document::after {
        display: none;
    }
}

@media (max-width: 340px) {
    .asg-table__link--document {
        max-width: 100%;
        overflow-wrap: anywhere;
        text-align: center;
        white-space: normal;
    }
}

.asg-table__empty {
    text-align: center;
    color: #6b7280;
    padding: 2rem 1rem !important;
}

.asg-table tbody tr:nth-child(odd) {
    background-color: #f3f4f6;
}

.asg-table tbody tr:nth-child(even) {
    background-color: var(--if-white);
}

.asg-table tbody tr,
.asg-modern-view table.table > tbody > tr {
    transition: filter 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.asg-table tbody td,
.asg-modern-view table.table > tbody > tr > td {
    transition: box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* #ifdevtabletv (tablas de líneas de documentos) queda EXCLUIDO de este efecto de
   hover: son tablas de inputs y el borde teal + la animación se ven raros ahí. El
   efecto es solo para listas (.asg-table) y vistas modern (.asg-modern-view). */
.asg-table tbody tr:hover > td,
.asg-modern-view table.table > tbody > tr:hover > td {
    box-shadow: inset 0 1px 0 #789a99, inset 0 -2px 0 #789a99;
}

.asg-table tbody tr:hover,
.asg-modern-view table.table > tbody > tr:hover {
    filter: drop-shadow(0 2px 3px rgba(11, 46, 50, 0.16));
}

.asg-table tbody tr:hover > td:last-child,
.asg-modern-view table.table > tbody > tr:hover > td:last-child {
    box-shadow: inset -1px 0 0 #789a99, inset 0 1px 0 #789a99, inset 0 -2px 0 #789a99;
}

.asg-modern-view table.table > tbody > tr:hover > td:first-child {
    box-shadow: inset 1px 0 0 #789a99, inset 0 1px 0 #789a99, inset 0 -2px 0 #789a99;
    border-radius: 6px 0 0 6px;
}

.asg-table tbody tr:hover > td:last-child,
.asg-modern-view table.table > tbody > tr:hover > td:last-child {
    border-radius: 0 6px 6px 0;
}

.purchase-list-view .card {
    overflow: hidden;
}

.purchase-list-view .asg-table thead th,
.purchase-list-view .asg-table tbody td {
    padding-right: 0.9rem;
    padding-left: 0.9rem;
}

.purchase-list-view .asg-table th:nth-child(1),
.purchase-list-view .asg-table td:nth-child(1) {
    width: 8.5rem;
}

.purchase-list-view .asg-table th:nth-child(2),
.purchase-list-view .asg-table td:nth-child(2) {
    width: 12.5rem;
}

.purchase-list-view .asg-table th:nth-child(3),
.purchase-list-view .asg-table td:nth-child(3) {
    width: 7.25rem;
    max-width: 7.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purchase-list-view .asg-table th:nth-child(4),
.purchase-list-view .asg-table td:nth-child(4) {
    width: 10rem;
}

.purchase-list-view .asg-table th:nth-child(5),
.purchase-list-view .asg-table td:nth-child(5),
.purchase-list-view .asg-table th:nth-child(6),
.purchase-list-view .asg-table td:nth-child(6),
.purchase-list-view .asg-table th:nth-child(7),
.purchase-list-view .asg-table td:nth-child(7) {
    width: 8.8rem;
}

.purchase-list-view .asg-table th:nth-child(8),
.purchase-list-view .asg-table td:nth-child(8),
.purchase-list-view .asg-table th:nth-child(9),
.purchase-list-view .asg-table td:nth-child(9) {
    width: 8rem;
}

.purchase-list-view .asg-table th:nth-child(10),
.purchase-list-view .asg-table td:nth-child(10) {
    width: 11rem;
    min-width: 11rem;
    padding-right: 0.65rem;
    padding-left: 0.65rem;
}

/* En móvil/responsive las celdas se apilan como cards: anular anchos fijos */
@media (max-width: 1365.98px) {
    .purchase-list-view .asg-table th,
    .purchase-list-view .asg-table td,
    .purchase-list-view .asg-table th:nth-child(1),
    .purchase-list-view .asg-table td:nth-child(1),
    .purchase-list-view .asg-table th:nth-child(2),
    .purchase-list-view .asg-table td:nth-child(2),
    .purchase-list-view .asg-table th:nth-child(3),
    .purchase-list-view .asg-table td:nth-child(3),
    .purchase-list-view .asg-table th:nth-child(4),
    .purchase-list-view .asg-table td:nth-child(4),
    .purchase-list-view .asg-table th:nth-child(5),
    .purchase-list-view .asg-table td:nth-child(5),
    .purchase-list-view .asg-table th:nth-child(6),
    .purchase-list-view .asg-table td:nth-child(6),
    .purchase-list-view .asg-table th:nth-child(7),
    .purchase-list-view .asg-table td:nth-child(7),
    .purchase-list-view .asg-table th:nth-child(8),
    .purchase-list-view .asg-table td:nth-child(8),
    .purchase-list-view .asg-table th:nth-child(9),
    .purchase-list-view .asg-table td:nth-child(9),
    .purchase-list-view .asg-table th:nth-child(10),
    .purchase-list-view .asg-table td:nth-child(10) {
        width: 100%;
    }
}

@media (max-width: 1365.98px) {
    .asg-table-wrapper {
        background: transparent;
        overflow-x: visible;
        padding: 10px;
    }

    .asg-table,
    .asg-table thead,
    .asg-table tbody,
    .asg-table th,
    .asg-table td,
    .asg-table tr {
        display: block;
        width: 100%;
    }

    .asg-table thead {
        display: none;
    }

    .asg-table tbody tr {
        margin-bottom: 12px;
        background: var(--if-white) !important;
        border: 1px solid var(--asg-border-light);
        border-radius: 8px;
        box-shadow: 0 2px 7px rgba(11, 46, 50, 0.07);
        overflow: hidden;
    }

    .asg-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 10px 12px;
        text-align: right !important;
        border-bottom: 1px solid #eef2f5;
    }

    .asg-table tbody td:last-child {
        border-bottom: 0;
    }

    .asg-table tbody td::before {
        content: attr(data-label);
        color: var(--asg-shadow);
        font-size: 0.72rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        flex: 0 0 42%;
    }

    /* En el modo apilado cada <tr> es una tarjeta. El hover tabular de escritorio
       dibuja una linea en cada <td>; se neutraliza y el estado pasa al registro
       completo. Las tablas con controles editables son superficies de captura y
       conservan su presentacion neutra. */
    .asg-table tbody tr {
        transition: border-color .2s ease, box-shadow .2s ease, filter .2s ease;
    }

    .asg-table tbody tr:hover {
        filter: none;
    }

    .asg-table tbody tr:hover > td,
    .asg-table tbody tr:hover > td:first-child,
    .asg-table tbody tr:hover > td:last-child {
        border-radius: 0;
        box-shadow: none;
    }

    .asg-table:not(#ifdevtabletv):not(.journal-lines-table):not(:has(tbody input:not([type="hidden"]), tbody select, tbody textarea, tbody [contenteditable="true"]))
        tbody tr:not(:has(.asg-table__empty)):hover,
    .asg-table:not(#ifdevtabletv):not(.journal-lines-table):not(:has(tbody input:not([type="hidden"]), tbody select, tbody textarea, tbody [contenteditable="true"]))
        tbody tr:not(:has(.asg-table__empty)):focus-within {
        border-color: #789a99;
        box-shadow: 0 5px 12px rgba(11, 46, 50, .16);
    }

    .asg-table__cell--nowrap {
        white-space: normal;
    }

    .asg-table__link--document {
        justify-content: flex-end;
        max-width: 100%;
    }

    .asg-table .dropdown {
        margin-left: auto;
    }

    .asg-table__empty {
        display: block !important;
        text-align: center !important;
    }

    .asg-table__empty::before {
        display: none;
    }
}

/* Footer de listas (escritorio): 3 zonas flex robustas en vez del position-absolute frágil */
@media (min-width: 1366px) {
    .asg-list-footer__page-size,
    .asg-list-footer__pagination {
        flex: 1 1 0;
        min-width: 0;
    }

    .asg-list-footer__pagination {
        justify-content: flex-end;
    }

    .asg-list-footer__summary {
        position: static !important;
        flex: 1 1 auto;
        text-align: center !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 1365.98px) {
    .asg-list-footer {
        flex-direction: column;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 12px;
        padding-bottom: calc(var(--asg-footer-h, 44px) + 0.5rem);
    }

    .asg-list-footer__page-size {
        justify-content: center;
        flex-wrap: wrap;
    }

    .asg-list-footer__page-size select {
        width: auto !important;
        min-width: 68px;
    }

    .asg-list-footer__summary {
        position: static !important;
        text-align: center !important;
        pointer-events: auto !important;
        order: 2;
    }

    .asg-list-footer__pagination {
        justify-content: center !important;
        order: 3;
    }

    .asg-list-footer__pagination nav {
        margin-top: 0 !important;
    }

    .asg-list-footer__pagination .pagination {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 0;
    }
}

/* Paginacion compacta (asg-pagination.js): el hueco «…» marca paginas omitidas,
   no es un boton. */
.ifdev-pagination .page-item.asg-pagination__gap .page-link,
:root[data-theme="dark"] .ifdev-pagination .page-item.asg-pagination__gap .page-link {
    background: transparent;
    border-color: transparent;
    color: var(--asg-text-muted);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    cursor: default;
}

/* Mientras el script no la compacta, una paginacion larga no se pinta completa
   para luego encogerse. */
.ifdev-pagination:not(.is-compact):has(> .page-item:nth-child(12)) {
    visibility: hidden;
}

/* --- ASG Search Bar --- */
.asg-search-bar {
    width: 100%;
    display: flex;
    position: relative;
    isolation: isolate;
    border-radius: 6px;
    transition: box-shadow 0.2s;
}

/* La sombra es un elemento detrás de la barra y no un box-shadow. El box-shadow no
   se pinta debajo de la caja: en la esquina inferior derecha el borde suavizado
   del botón se mezclaba con el fondo blanco y dejaba una línea clara entre el
   botón y la sombra. Este sí queda debajo de la esquina. */
.asg-search-bar::before {
    content: "";
    position: absolute;
    inset: 4px 0 -4px 0;
    border-radius: 6px;
    background-color: var(--asg-shadow);
    z-index: -1;
}

.asg-search-bar:focus-within {
    box-shadow: 0 0 0 3px rgba(11, 46, 50, 0.1);
}

/* Sin fondo propio por la misma razón: el blanco va en el campo de texto, para
   que detrás del botón no quede nada claro que asome por su esquina. */
.asg-search-bar__group {
    display: flex;
    width: 100%;
    border-radius: 6px;
    font-family: inherit;
    overflow: hidden;
}

.asg-search-bar__input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--asg-shadow);
    background-color: var(--if-white);
    /* Borde a la izquierda, arriba y abajo; el lado derecho lo cierra el botón. */
    box-shadow:
        inset 1px 0 0 var(--asg-border-light),
        inset 0 1px 0 var(--asg-border-light),
        inset 0 -1px 0 var(--asg-border-light);
    border-radius: 6px 0 0 6px;
    transition: box-shadow 0.2s;
    border: none;
    outline: none;
    font-family: inherit;
    margin: 0;
}

.asg-search-bar__group:focus-within .asg-search-bar__input {
    box-shadow:
        inset 1px 0 0 var(--asg-shadow),
        inset 0 1px 0 var(--asg-shadow),
        inset 0 -1px 0 var(--asg-shadow);
}

.asg-search-bar__input::placeholder {
    color: var(--asg-text-muted);
}

.asg-search-bar__button {
    border: none;
    font-weight: 700;
    color: var(--if-white);
    background-color: var(--asg-btn-submit);
    padding: 10px 25px;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: inherit;
    margin: 0;
    flex-shrink: 0;
    align-self: stretch;
}

.asg-search-bar__button:hover {
    background-color: var(--asg-shadow);
}

#ifdevtabletv > tfoot > tr > td {
    border-top: 1px solid #eef2f5 !important;
    background: #fbfcfd;
    padding: 9px 12px;
}

.asg-add-line-btn {
    border: 0;
    background: transparent;
    color: #22b8a7;
    font-size: 0.96rem;
    font-weight: 800;
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    transition: color 0.15s ease, transform 0.15s ease;
}

.asg-add-line-btn:hover,
.asg-add-line-btn:focus {
    color: var(--asg-shadow);
    outline: none;
    transform: translateX(2px);
}

.asg-add-line-btn i {
    font-size: 0.82rem;
}

@media (max-width: 1024px) {
    #PurchaseContainer {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0.8rem 0 0.55rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    #ifdevtabletv,
    #ifdevtabletv > tbody,
    #ifdevtabletv > tfoot,
    #ifdevtabletv > tbody > tr,
    #ifdevtabletv > tfoot > tr,
    #ifdevtabletv > tfoot > tr > td {
        display: block;
        width: 100%;
    }

    #ifdevtabletv > thead {
        display: none;
    }

    #ifdevtabletv > tbody > tr {
        border: 1px solid #dfe6ea;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 4px 5px 0 #0b3a3f;
        margin-bottom: 16px;
        padding: 12px;
    }

    #ifdevtabletv > tbody > tr > td {
        display: block;
        width: 100%;
        padding: 7px 0;
        border: 0 !important;
    }

    #ifdevtabletv > tbody > tr > td[style*="display:none"] {
        display: none !important;
    }

    #ifdevtabletv > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--asg-shadow);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.2;
        margin-bottom: 5px;
        text-transform: uppercase;
    }

    #ifdevtabletv > tbody > tr > td > input.form-control,
    #ifdevtabletv > tbody > tr > td > select.form-control {
        min-height: 42px;
        border-color: #dfe6ea;
        background: #ffffff;
    }

    #ifdevtabletv > tbody > tr > td.text-center {
        padding-top: 10px;
    }

    #ifdevtabletv .btn-danger {
        width: 100%;
        min-height: 40px;
        border-color: #f5c2c7;
        background: #fff7f8;
    }

    #ifdevtabletv > tfoot > tr > td {
        border: 1px dashed #b9deda !important;
        border-radius: 10px;
        background: #f5fbfa;
        padding: 12px 14px;
    }

    .asg-add-line-btn {
        width: 100%;
        justify-content: center;
        min-height: 38px;
    }
}

/* --- Financial Purchase Documents --- */
.financial-purchase-view > .row {
    margin: 0;
}

.financial-purchase-view > .row > .container-fluid {
    padding: 12px;
}

.financial-purchase-detail-view > .row {
    --bs-gutter-x: 0;
    margin-right: 0;
    margin-left: 0;
}

.financial-purchase-detail-view > .row > .container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.financial-purchase-detail-view {
    padding-bottom: calc(var(--asg-footer-h, 44px) + 1.5rem);
}

.financial-purchase-detail-view .document-detail-shell .asg-field {
    margin-bottom: 0.4rem;
}

.financial-purchase-detail-view .document-detail-shell .asg-field > label {
    margin-top: 0;
    margin-bottom: 0.3rem;
    line-height: 1.15;
}

.financial-purchase-detail-view .document-detail-shell .asg-tab-pane > .m-3 > .row:last-child,
.financial-purchase-detail-view .document-detail-shell .asg-tab-pane > .m-3 > .row:last-child .asg-field {
    margin-bottom: 0 !important;
}

.financial-purchase-view.purchase-creation-view {
    padding-bottom: calc(var(--asg-footer-h, 44px) + 1.5rem) !important;
}

.financial-purchase-view.asg-modern-view .asg-form-shell,
.financial-purchase-detail-view .document-detail-shell > .asg-tabs-wrapper {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.financial-purchase-view #PurchaseContainer {
    height: 38vh;
    min-height: 250px;
    overflow: auto;
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    background: #ffffff;
}

.financial-purchase-view #ifdevtabletv {
    margin: 0;
    border-color: transparent;
    font-size: 0.93rem;
}

.financial-purchase-detail-view #ifdevtabletv {
    font-size: 0.95rem;
}

.financial-purchase-view #ifdevtabletv > thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Encabezado igual al de la orden de compra: mayúsculas con tracking y sin separadores
   verticales. La NC financiera comparte el mismo componente de tabla (#ifdevtabletv), así
   que debe verse idéntica; la diferencia venía de que compras estiliza inline y esta vista
   por CSS global. */
.financial-purchase-view #ifdevtabletv > thead > tr > th {
    padding: 12px 8px;
    border-color: #e5e9ed !important;
    border-top: none !important;
    background: #f6f8fa !important;
    color: #4a5560;
    font-size: 0.80rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    vertical-align: middle;
    white-space: nowrap;
}

.financial-purchase-view #ifdevtabletv > tbody > tr > td {
    padding: 6px;
    border-color: #f0f3f5 !important;
    vertical-align: middle;
}

.financial-purchase-detail-view #ifdevtabletv > tbody > tr > td {
    padding: 7px 6px;
}

.financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control,
.financial-purchase-view #ifdevtabletv > tbody > tr > td > select.form-control {
    min-height: 32px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    font-size: 0.93rem;
    transition: all 0.15s ease;
}

/* Estados interactivos de la tabla de detalle, iguales a los de la orden de compra.
   Faltaban por completo en la NC financiera: sin ellos las celdas no daban feedback al
   pasar el cursor, los campos no mostraban foco y los de solo lectura se veían editables. */
.financial-purchase-view #ifdevtabletv > tbody > tr:hover > td {
    background: #fafbfc;
}

.financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control:hover,
.financial-purchase-view #ifdevtabletv > tbody > tr > td > select.form-control:hover {
    border-color: #d6dce2;
    background: #ffffff;
}

.financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control:focus,
.financial-purchase-view #ifdevtabletv > tbody > tr > td > select.form-control:focus {
    border-color: #0b2e32;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(11, 46, 50, 0.08);
    outline: none;
}

.financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control[readonly] {
    background: #f6f8fa;
    color: #6b7785;
    font-weight: 500;
    cursor: default;
}

.financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control[readonly]:hover {
    border-color: transparent;
    background: #f6f8fa;
}

/* Botón de quitar línea: fantasma, no el rojo sólido de Bootstrap. En escritorio la NC
   financiera no lo tenía (solo existía dentro del @media de 1024px). */
.financial-purchase-view #ifdevtabletv .btn-danger {
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #c82333;
    font-weight: 600;
    padding: 4px 9px;
    transition: all 0.15s ease;
}

.financial-purchase-view #ifdevtabletv .btn-danger:hover {
    border-color: #f5c2c7;
    background: #fdecee;
    color: #b02a37;
}

.financial-purchase-detail-view #ifdevtabletv > tbody > tr > td > input.form-control,
.financial-purchase-detail-view #ifdevtabletv > tbody > tr > td > select.form-control {
    font-size: 0.95rem;
}

/* Mismo alto fijo que el detalle de orden de compra y de factura de proveedor: el área de
   la tabla siempre mide 38vh, así los totales quedan a la misma altura sin importar cuántas
   líneas traiga el documento. Antes esto era height:auto para que una sola línea no se
   estirara, pero eso encogía el contenedor y dejaba los totales pegados al encabezado; el
   estiramiento ya lo evita la regla siguiente (filas y celdas con height:auto). */
.financial-purchase-detail-view #PurchaseContainer {
    height: 38vh !important;
    min-height: 0;
    overflow: auto;
    margin: 0.55rem 0.5rem 0.4rem !important;
    border-radius: 12px;
    /* El contenedor lleva la clase .row de Bootstrap, que es display:flex: la tabla queda
       como ítem flex y con align-items:stretch se estira a los 38vh, de modo que el
       vertical-align:middle de las celdas centra la única línea. Volviéndolo bloque, la
       tabla mide lo que mide su contenido y las filas quedan pegadas arriba. Mismo
       display:block !important que usa el detalle de la orden de compra. */
    display: block !important;
}

/* En pantallas chicas el alto fijo solo desperdicia espacio: el contenedor vuelve a medir
   lo que mida su contenido, igual que en el detalle de la orden de compra. */
@media (max-width: 1024px) {
    .financial-purchase-detail-view #PurchaseContainer {
        height: auto !important;
        max-height: none;
    }
}

.financial-purchase-detail-view #ifdevtabletv,
.financial-purchase-detail-view #ifdevtabletv > tbody,
.financial-purchase-detail-view #ifdevtabletv > tbody > tr {
    height: auto !important;
}

.financial-purchase-detail-view #ifdevtabletv > thead > tr > th {
    padding: 12px 8px;
    border-color: #e5e9ed !important;
    border-top: 0 !important;
    background: #f6f8fa !important;
    color: #4a5560;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.financial-purchase-detail-view #ifdevtabletv > tbody > tr > td {
    height: auto !important;
    padding: 7px 6px;
    vertical-align: middle;
}

.financial-purchase-detail-view #ifdevtabletv > tbody > tr > td > input.form-control,
.financial-purchase-detail-view #ifdevtabletv > tbody > tr > td > select.form-control {
    min-height: 34px;
    padding: 5px 8px;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: default;
    opacity: 1;
}

.financial-purchase-view .financial-summary-row {
    align-items: flex-start;
    gap: 12px 0;
}

.financial-purchase-view .financial-summary-row > [id^="ifdev_DocTotal"] > .row > [class*="col-"] {
    width: 100%;
}

.financial-purchase-view .financial-summary-row textarea {
    min-height: 132px;
    resize: vertical;
}

@media (max-width: 1024px) {
    .financial-purchase-view {
        margin-top: 0 !important;
        padding: 0 8px calc(var(--asg-footer-h, 44px) + 3.5rem) !important;
    }

    .financial-purchase-view > .row > .container-fluid {
        padding: 8px 4px 16px;
    }

    .financial-purchase-view .asg-form-actions-top,
    .financial-purchase-view .detail-header__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 8px;
    }

    .financial-purchase-view .asg-form-actions-top .btn-asg,
    .financial-purchase-view .detail-header__actions .btn-asg {
        width: 100%;
    }

    .financial-purchase-view #ifdevtabletv > tbody > tr {
        border-radius: 8px;
        box-shadow: 3px 4px 0 #0b3a3f;
    }

    .financial-purchase-view .financial-summary-row > .col-sm-6,
    .financial-purchase-view .financial-summary-row > [id^="ifdev_DocTotal"] {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .financial-purchase-view .asg-form-actions-top,
    .financial-purchase-view .detail-header__actions {
        grid-template-columns: 1fr;
    }
}

:root[data-theme="dark"] .financial-purchase-view.asg-modern-view .asg-form-shell,
:root[data-theme="dark"] .financial-purchase-detail-view .document-detail-shell > .asg-tabs-wrapper {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .financial-purchase-view #PurchaseContainer {
    border-color: var(--asg-dark-border);
    background: var(--asg-dark-surface);
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > thead > tr > th {
    border-color: var(--asg-dark-border);
    background: var(--asg-dark-surface-2);
    color: var(--asg-dark-muted);
}

/* Contraparte oscura de los estados interactivos de la tabla de detalle (mismos valores
   que la orden de compra). Sin esto el hover claro (#fafbfc) daría un destello blanco
   sobre la superficie oscura. */
:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr > td {
    border-color: var(--asg-dark-border) !important;
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr:hover > td {
    background: var(--asg-dark-surface-2);
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tfoot > tr > td {
    background: var(--asg-dark-surface-2);
    border-top-color: var(--asg-dark-border) !important;
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control,
:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr > td > select.form-control {
    background: transparent;
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control::placeholder {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control:hover,
:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr > td > select.form-control:hover {
    border-color: var(--asg-dark-border);
    background: var(--asg-dark-surface-2);
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control:focus,
:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr > td > select.form-control:focus {
    border-color: #5fb7af;
    background: var(--asg-dark-surface-3);
    box-shadow: 0 0 0 2px rgba(95, 183, 175, 0.18);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control[readonly] {
    background: var(--asg-dark-surface-2);
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv > tbody > tr > td > input.form-control[readonly]:hover {
    border-color: transparent;
    background: var(--asg-dark-surface-2);
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv .btn-danger {
    color: #ff7b86;
}

:root[data-theme="dark"] .financial-purchase-view #ifdevtabletv .btn-danger:hover {
    border-color: rgba(255, 123, 134, 0.4);
    background: rgba(255, 123, 134, 0.12);
    color: #ff7b86;
}

:root[data-theme="dark"] .financial-purchase-detail-view #ifdevtabletv > tbody > tr > td > input.form-control,
:root[data-theme="dark"] .financial-purchase-detail-view #ifdevtabletv > tbody > tr > td > select.form-control,
:root[data-theme="dark"] .financial-purchase-detail-view #ifdevtabletv > tbody > tr > td > input.form-control:disabled,
:root[data-theme="dark"] .financial-purchase-detail-view #ifdevtabletv > tbody > tr > td > select.form-control:disabled {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--asg-dark-text) !important;
    box-shadow: none !important;
    opacity: 1;
}

/* Financial supplier credit memo aligned with Purchase Request. */
.financial-purchase-view.purchase-supplier-doc {
    font-size: 14px;
}

.financial-purchase-view.purchase-supplier-doc.asg-modern-view .asg-form-shell,
.financial-purchase-detail-view .document-detail-shell > .asg-tabs-wrapper {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.financial-purchase-detail-view .document-detail-shell > .asg-tabs-wrapper {
    margin-bottom: 0.7rem;
}

.financial-purchase-view #ifdevtabletv[data-cur="ml"] .col-fc {
    display: none !important;
}

.financial-purchase-view #ifdevtabletv[data-cur="fc"] .col-ml {
    display: none !important;
}

.financial-purchase-view .comments-card,
.financial-purchase-view .totals-card {
    padding: 16px 20px;
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04);
}

.financial-purchase-view .comments-card label {
    display: block;
    margin-bottom: 0.45rem;
    color: #0b2e32;
    font-size: 0.78rem;
    font-weight: 700;
}

.financial-purchase-view .comments-card textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
}

.financial-purchase-view .totals-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 24px;
}

.financial-purchase-view .totals-row > .form-group {
    flex: 1 1 190px;
    min-width: 0;
    margin-bottom: 0;
}

.financial-purchase-view .totals-row .control-label {
    display: block;
    margin-bottom: 4px;
    overflow: hidden;
    color: #6b7785;
    font-size: 0.78rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.financial-purchase-view .totals-row input.form-control {
    height: auto !important;
    padding: 4px 0 6px !important;
    border: 0 !important;
    border-bottom: 1px solid #d6dce2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 1.35rem !important;
    text-align: right;
    box-shadow: none !important;
}

.financial-purchase-view .totals-row .form-group:last-child input.form-control {
    border-bottom-color: #0b2e32 !important;
    color: #0b2e32 !important;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .financial-purchase-view.purchase-supplier-doc.asg-modern-view .asg-form-shell,
    .financial-purchase-detail-view .document-detail-shell > .asg-tabs-wrapper {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .financial-purchase-view .comments-card,
    .financial-purchase-view .totals-card {
        margin-top: 0.55rem;
        padding: 16px;
    }

    .financial-purchase-view .totals-row {
        gap: 16px;
    }

    .financial-purchase-view .totals-row > .form-group {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (max-width: 575.98px) {
    .financial-purchase-view .totals-row > .form-group {
        flex-basis: 100%;
    }
}

:root[data-theme="dark"] .financial-purchase-view.purchase-supplier-doc.asg-modern-view .asg-form-shell,
:root[data-theme="dark"] .financial-purchase-detail-view .document-detail-shell > .asg-tabs-wrapper {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none;
}

:root[data-theme="dark"] .financial-purchase-view .comments-card,
:root[data-theme="dark"] .financial-purchase-view .totals-card {
    border-color: var(--asg-dark-border) !important;
    background: var(--asg-dark-surface) !important;
    box-shadow: none;
}

:root[data-theme="dark"] .financial-purchase-view .comments-card label,
:root[data-theme="dark"] .financial-purchase-view .totals-row .control-label {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .financial-purchase-view .totals-row input.form-control {
    color: var(--asg-dark-text) !important;
    border-bottom-color: var(--asg-dark-border) !important;
}

:root[data-theme="dark"] .financial-purchase-view .totals-row .form-group:last-child input.form-control {
    color: #6fe9d6 !important;
    border-bottom-color: #5fb7af !important;
}

/* --- Purchase/Supplier Document Alignment --- */
.purchase-supplier-doc {
    font-size: 13px;
}

.purchase-supplier-doc .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.purchase-supplier-doc .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.purchase-supplier-doc > h5 {
    margin: 0 0.5rem 0.65rem;
    color: #0b2e32;
    font-size: 1.05rem;
    font-weight: 800;
}

.purchase-supplier-doc > hr {
    margin: 0 0.5rem 0.75rem;
    border-color: #e5e9ed;
    opacity: 1;
}

.purchase-supplier-doc .asg-form-shell,
.purchase-supplier-doc.document-detail-view .document-detail-shell {
    overflow: hidden;
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04);
}

/* Detalle: sin contenedor con borde/sombra que envuelva la sección (igual que Oferta de Venta) */
.purchase-supplier-doc.document-detail-view .document-detail-shell {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.purchase-supplier-doc .asg-form-actions-top {
    top: 8px;
    right: 10px;
}

.purchase-supplier-doc .asg-form-shell > .asg-tabs-wrapper > .asg-tabs-nav,
.purchase-supplier-doc .document-detail-shell > .asg-tabs-wrapper > .asg-tabs-nav {
    border-bottom: 1px solid #eef1f3;
    background: #ffffff;
    padding: 10px 300px 4px 10px;
}

.purchase-supplier-doc .asg-form-shell > .asg-tabs-wrapper > .tab-content,
.purchase-supplier-doc .document-detail-shell > .asg-tabs-wrapper > .tab-content {
    margin: 0 !important;
    padding: 0.55rem 0.65rem 0 !important;
}

.purchase-supplier-doc .asg-form-shell .asg-tab-pane,
.purchase-supplier-doc .document-detail-shell .asg-tab-pane {
    padding: 0 !important;
}

.purchase-supplier-doc .asg-form-shell .asg-tab-pane > .m-3,
.purchase-supplier-doc .document-detail-shell .asg-tab-pane > .m-3 {
    margin: 0 !important;
}

.purchase-supplier-doc .asg-form-shell .asg-tab-pane .row,
.purchase-supplier-doc .document-detail-shell .asg-tab-pane .row {
    row-gap: 6px;
}

.purchase-supplier-doc .asg-field,
.purchase-supplier-doc .form-group {
    margin-bottom: 0.55rem;
}

.purchase-supplier-doc .asg-field > label,
.purchase-supplier-doc .form-group > label,
.purchase-supplier-doc label:not(.form-check-label) {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.42rem;
    overflow: hidden;
    color: #0b2e32;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase-supplier-doc .asg-input,
.purchase-supplier-doc .form-control,
.purchase-supplier-doc .form-control-sm,
.purchase-supplier-doc .ts-wrapper.asg-input .ts-control {
    min-height: 41px;
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    background-color: #ffffff;
    color: #0b2e32;
    font-size: 0.9rem;
    box-shadow: none;
}

.purchase-supplier-doc.purchase-creation-view {
    font-size: 14px;
}

.purchase-supplier-doc.purchase-creation-view .asg-form-shell .asg-field > label,
.purchase-supplier-doc.purchase-creation-view .asg-form-shell .form-group > label,
.purchase-supplier-doc.purchase-creation-view .asg-form-shell label:not(.form-check-label) {
    margin-bottom: 0.45rem;
    font-size: 14px;
    font-weight: 500;
}

.purchase-supplier-doc.purchase-creation-view .asg-form-shell .asg-field .asg-input,
.purchase-supplier-doc.purchase-creation-view .asg-form-shell .asg-field .form-control,
.purchase-supplier-doc.purchase-creation-view .asg-form-shell .asg-field .form-control-sm,
.purchase-supplier-doc.purchase-creation-view .asg-form-shell .form-group .asg-input,
.purchase-supplier-doc.purchase-creation-view .asg-form-shell .form-group .form-control,
.purchase-supplier-doc.purchase-creation-view .asg-form-shell .form-group .form-control-sm,
.purchase-supplier-doc.purchase-creation-view .asg-form-shell .asg-field .ts-wrapper.asg-input .ts-control,
.purchase-supplier-doc.purchase-creation-view .asg-form-shell .form-group .ts-wrapper.asg-input .ts-control {
    min-height: 42px;
    padding: 10px 14px;
    font-size: 14px;
}

.purchase-supplier-doc.purchase-creation-view .asg-form-shell .asg-field .ts-wrapper.asg-input .ts-control > input,
.purchase-supplier-doc.purchase-creation-view .asg-form-shell .form-group .ts-wrapper.asg-input .ts-control > input {
    font-size: 14px;
}

/* Detail y Edit: igualar estilo visual a CustomerOffer */
.purchase-supplier-doc.document-detail-view .asg-field > label,
.purchase-supplier-doc.document-detail-view label:not(.form-check-label),
.purchase-supplier-doc.edit-purchase-view .asg-field > label,
.purchase-supplier-doc.edit-purchase-view label:not(.form-check-label) {
    font-size: 13px;
    font-weight: 500;
    color: inherit;
}

.purchase-supplier-doc.document-detail-view .asg-input,
.purchase-supplier-doc.document-detail-view .form-control,
.purchase-supplier-doc.document-detail-view .form-control-sm,
.purchase-supplier-doc.edit-purchase-view .asg-input,
.purchase-supplier-doc.edit-purchase-view .form-control,
.purchase-supplier-doc.edit-purchase-view .form-control-sm {
    font-size: 14px;
}

.purchase-supplier-doc .asg-input:focus,
.purchase-supplier-doc .form-control:focus,
.purchase-supplier-doc .form-control-sm:focus,
.purchase-supplier-doc .ts-wrapper.asg-input.focus .ts-control {
    border-color: #0b2e32;
    box-shadow: 0 0 0 3px rgba(11, 46, 50, 0.08);
}

.purchase-supplier-doc .asg-input-readonly,
.purchase-supplier-doc .asg-input:read-only,
.purchase-supplier-doc .asg-input:disabled,
.purchase-supplier-doc .form-control[readonly],
.purchase-supplier-doc .form-control:disabled {
    border-color: #e5e9ed;
    background-color: #f6f8fa;
    color: #51606d;
}

/* Detalle: inputs readonly idénticos a Oferta de Venta:
   fondo gris #e6e6e6 con borde del mismo tono (se funde, sin recuadro) */
.purchase-supplier-doc.document-detail-view .asg-input-readonly,
.purchase-supplier-doc.document-detail-view .asg-input:read-only,
.purchase-supplier-doc.document-detail-view .asg-input:disabled,
.purchase-supplier-doc.document-detail-view .form-control[readonly],
.purchase-supplier-doc.document-detail-view .form-control:disabled {
    border-color: var(--asg-border-light);
    background-color: var(--asg-bg-disabled);
    color: var(--asg-shadow);
}

.purchase-supplier-doc #PurchaseContainer {
    display: block !important;
    height: 38vh !important;
    overflow: auto !important;
    padding: 0 !important;
    margin: 0.65rem 0.5rem 0.5rem !important;
    border: 1px solid #e5e9ed !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04) !important;
}

.purchase-supplier-doc #ifdevtabletv {
    margin: 0;
    color: #0b2e32;
    font-size: 0.88rem;
}

.purchase-supplier-doc #ifdevtabletv > thead > tr > th {
    border-bottom: 1px solid #e5e9ed;
    background: #f8fafb;
    color: #4a5560;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.15;
    padding: 10px 8px;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.purchase-supplier-doc #ifdevtabletv > tbody > tr > td {
    border-bottom: 1px solid #eef2f5;
    padding: 7px 6px;
    vertical-align: middle;
}

.purchase-supplier-doc #ifdevtabletv > tbody > tr > td > input.form-control,
.purchase-supplier-doc #ifdevtabletv > tbody > tr > td > select.form-control,
.purchase-supplier-doc #ifdevtabletv > tbody > tr > td > .asg-input {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 0.84rem;
}

.purchase-supplier-doc .totals-card {
    border: 1px solid #e5e9ed !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04) !important;
}

.purchase-supplier-doc .totals-card .form-control,
.purchase-supplier-doc .totals-card .form-control-sm,
.purchase-supplier-doc .totals-card .asg-input {
    min-height: 38px;
    text-align: right;
    font-weight: 700;
}

.purchase-supplier-doc.document-detail-view .detail-header {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04);
}

.purchase-supplier-doc .alert.alert-light {
    margin: 0 0.5rem 0.75rem;
    border: 1px solid #e5e9ed !important;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04);
}

@media (max-width: 1024px) {
    .purchase-supplier-doc {
        margin-top: 0 !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    .purchase-supplier-doc .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .purchase-supplier-doc .asg-form-shell,
    .purchase-supplier-doc.document-detail-view .document-detail-shell {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .purchase-supplier-doc .asg-form-shell > .asg-tabs-wrapper > .asg-tabs-nav,
    .purchase-supplier-doc .document-detail-shell > .asg-tabs-wrapper > .asg-tabs-nav {
        padding-right: 0;
        overflow-x: auto;
    }

    .purchase-supplier-doc .asg-form-actions-top,
    .purchase-supplier-doc .document-detail-actions-top {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        padding: 8px 8px 10px;
    }

    .purchase-supplier-doc .asg-form-actions-top .btn,
    .purchase-supplier-doc .asg-form-actions-top button,
    .purchase-supplier-doc .asg-form-actions-top a,
    .purchase-supplier-doc .document-detail-actions-top .btn,
    .purchase-supplier-doc .document-detail-actions-top button,
    .purchase-supplier-doc .document-detail-actions-top a {
        width: 100%;
    }

    .purchase-supplier-doc .asg-form-shell > .asg-tabs-wrapper > .tab-content,
    .purchase-supplier-doc .document-detail-shell > .asg-tabs-wrapper > .tab-content {
        padding: 0.55rem 0.35rem 0 !important;
    }

    .purchase-supplier-doc .asg-form-shell .asg-field,
    .purchase-supplier-doc .asg-form-shell .form-group,
    .purchase-supplier-doc .document-detail-shell .asg-field {
        margin-bottom: 0.45rem;
    }

    .purchase-supplier-doc #PurchaseContainer {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0.8rem 0 0.55rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .purchase-supplier-doc #ifdevtabletv,
    .purchase-supplier-doc #ifdevtabletv > tbody,
    .purchase-supplier-doc #ifdevtabletv > tfoot,
    .purchase-supplier-doc #ifdevtabletv > tbody > tr,
    .purchase-supplier-doc #ifdevtabletv > tfoot > tr,
    .purchase-supplier-doc #ifdevtabletv > tfoot > tr > td {
        display: block;
        width: 100%;
    }

    .purchase-supplier-doc #ifdevtabletv > thead {
        display: none;
    }

    .purchase-supplier-doc #ifdevtabletv > tbody > tr {
        margin-bottom: 16px;
        padding: 12px;
        border: 1px solid #dfe6ea;
        border-radius: 10px;
        background: #ffffff;
        box-shadow: 0 1px 2px rgba(11, 46, 50, 0.08);
    }

    .purchase-supplier-doc #ifdevtabletv > tbody > tr > td {
        display: block;
        width: 100%;
        padding: 7px 0;
        border: 0 !important;
    }

    .purchase-supplier-doc #ifdevtabletv > tbody > tr > td[style*="display:none"] {
        display: none !important;
    }

    .purchase-supplier-doc #ifdevtabletv > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: #0b2e32;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .purchase-supplier-doc #ifdevtabletv > tbody > tr > td > input.form-control,
    .purchase-supplier-doc #ifdevtabletv > tbody > tr > td > select.form-control,
    .purchase-supplier-doc #ifdevtabletv > tbody > tr > td > .asg-input {
        min-height: 42px;
    }

    .purchase-supplier-doc #ifdevtabletv .btn-danger {
        width: 100%;
        min-height: 40px;
        border-color: #f5c2c7;
        background: #fff7f8;
    }

    .purchase-supplier-doc #ifdevtabletv > tfoot > tr > td {
        border: 1px dashed #b9deda !important;
        border-radius: 10px;
        background: #f5fbfa;
        padding: 12px 14px;
    }
}

@media (max-width: 575.98px) {
    .purchase-supplier-doc .asg-form-actions-top,
    .purchase-supplier-doc .document-detail-actions-top {
        grid-template-columns: 1fr;
        padding-left: 0;
        padding-right: 0;
    }

    .purchase-supplier-doc .detail-header__actions {
        grid-template-columns: 1fr;
    }
}

/* Credit memo create: exact visual geometry used by CreatePurchaseRequest. */
.financial-purchase-view.purchase-creation-view {
    overflow-x: hidden;
    padding-bottom: calc(var(--asg-footer-h, 44px) + 1.5rem) !important;
}

.financial-purchase-view.purchase-creation-view > .row {
    --bs-gutter-x: 0;
    margin-right: 0;
    margin-left: 0;
}

.financial-purchase-view.purchase-creation-view > .row > .container-fluid {
    display: block;
    flex: 0 1 auto;
    max-width: 100%;
    padding: 0;
}

.financial-purchase-view.purchase-creation-view .asg-form-shell,
.financial-purchase-view.purchase-creation-view .asg-form-shell > .asg-tabs-wrapper {
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.financial-purchase-view.purchase-creation-view .asg-form-shell {
    position: relative;
}

.financial-purchase-view.purchase-creation-view .asg-form-shell > .asg-tabs-wrapper {
    margin-bottom: 0 !important;
}

.financial-purchase-view.purchase-creation-view .asg-form-shell > .asg-tabs-wrapper > .asg-tabs-nav {
    padding: 10px 280px 4px 0;
}

.financial-purchase-view.purchase-creation-view .asg-form-shell > .asg-tabs-wrapper > .tab-content {
    margin: 0 !important;
    padding: 0.45rem 0.5rem 0 !important;
}

.financial-purchase-view.purchase-creation-view .asg-form-shell .asg-tab-pane,
.financial-purchase-view.purchase-creation-view .asg-form-shell .asg-tab-pane > .m-3 {
    padding: 0 !important;
}

.financial-purchase-view.purchase-creation-view .asg-form-shell .asg-tab-pane > .m-3 {
    margin: 0 !important;
}

.financial-purchase-view.purchase-creation-view .asg-form-shell .asg-field {
    margin-bottom: 0.4rem;
}

.financial-purchase-view.purchase-creation-view .asg-form-shell .asg-field > label {
    margin-top: 0;
    margin-bottom: 0.3rem;
    line-height: 1.15;
}

.financial-purchase-view.purchase-creation-view .asg-form-shell .asg-tab-pane > .m-3 > .row:last-child,
.financial-purchase-view.purchase-creation-view .asg-form-shell .asg-tab-pane > .m-3 > .row:last-child .asg-field {
    margin-bottom: 0 !important;
}

.financial-purchase-view.purchase-creation-view .asg-form-actions-top {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
}

.financial-purchase-view.purchase-creation-view #PurchaseContainer {
    display: block !important;
    height: 38vh !important;
    min-height: 0;
    overflow: auto !important;
    margin: 0.55rem 0.5rem 0.4rem !important;
    padding: 0 !important;
    border: 1px solid #e5e9ed !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04) !important;
}

.financial-purchase-view.purchase-creation-view #ifdevtabletv {
    margin: 0;
    border-color: transparent;
    font-size: 0.93rem;
}

.financial-purchase-view.purchase-creation-view #ifdevtabletv > thead > tr > th {
    padding: 12px 8px;
    border-color: #e5e9ed !important;
    border-top: 0 !important;
    background: #f6f8fa !important;
    color: #4a5560;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody > tr > td {
    padding: 6px;
    border-color: #f0f3f5 !important;
    vertical-align: middle;
}

.financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody > tr > td > input.form-control,
.financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody > tr > td > select.form-control {
    min-height: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 0.93rem;
    box-shadow: none;
}

.financial-purchase-view.purchase-creation-view #ifdevtabletv > tfoot > tr > td {
    padding: 9px 12px;
    border-top: 1px solid #eef2f5 !important;
    background: #fbfcfd;
}

.financial-purchase-view.purchase-creation-view .totals-card {
    margin: 0;
    padding: 18px 24px;
    border: 1px solid #e5e9ed !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04) !important;
}

.financial-purchase-view.purchase-creation-view .totals-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 24px;
}

.financial-purchase-view.purchase-creation-view .totals-row > .form-group {
    flex: 1 1 200px;
    min-width: 0;
    margin-bottom: 0;
}

.financial-purchase-view.purchase-creation-view .totals-row input.form-control,
.financial-purchase-view.purchase-creation-view .totals-row input.form-control-sm {
    height: auto !important;
    min-height: 0;
    padding: 4px 0 6px !important;
    border: 0 !important;
    border-bottom: 1px solid #d6dce2 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1a1a1a !important;
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.financial-purchase-view.purchase-creation-view .totals-row .form-group:last-child input.form-control {
    border-bottom-color: #0b2e32 !important;
    color: #0b2e32 !important;
    font-weight: 700 !important;
}

@media (max-width: 1024px) {
    .financial-purchase-view.purchase-creation-view {
        margin-top: 0 !important;
        padding: 0 8px calc(var(--asg-footer-h, 44px) + 3.5rem) !important;
    }

    .financial-purchase-view.purchase-creation-view .asg-form-shell > .asg-tabs-wrapper > .asg-tabs-nav {
        overflow-x: auto;
        padding-right: 0;
    }

    .financial-purchase-view.purchase-creation-view .asg-form-actions-top {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        padding: 8px 8px 10px;
    }

    .financial-purchase-view.purchase-creation-view .asg-form-actions-top .btn,
    .financial-purchase-view.purchase-creation-view .asg-form-actions-top button,
    .financial-purchase-view.purchase-creation-view .asg-form-actions-top a {
        width: 100%;
    }

    .financial-purchase-view.purchase-creation-view .asg-form-shell > .asg-tabs-wrapper > .tab-content {
        padding: 0.55rem 0.35rem 0 !important;
    }

    .financial-purchase-view.purchase-creation-view .asg-form-shell .asg-tab-pane .row {
        row-gap: 6px;
    }

    .financial-purchase-view.purchase-creation-view .asg-form-shell .asg-field {
        margin-bottom: 0.4rem;
    }

    .financial-purchase-view.purchase-creation-view .asg-form-shell .asg-field > label {
        display: block;
        margin-top: 0;
        margin-bottom: 0.3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .financial-purchase-view.purchase-creation-view #PurchaseContainer {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0.8rem 0 0.55rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .financial-purchase-view.purchase-creation-view #ifdevtabletv,
    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody,
    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tfoot,
    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody > tr,
    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tfoot > tr,
    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tfoot > tr > td {
        display: block;
        width: 100%;
    }

    .financial-purchase-view.purchase-creation-view #ifdevtabletv > thead {
        display: none;
    }

    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody > tr {
        margin-bottom: 16px;
        padding: 12px;
        border: 1px solid #dfe6ea;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 4px 5px 0 #0b3a3f;
    }

    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody > tr > td {
        display: block;
        width: 100%;
        padding: 7px 0;
        border: 0 !important;
    }

    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody > tr > td[style*="display:none"] {
        display: none !important;
    }

    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 5px;
        color: #4a5560;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody > tr > td > input.form-control,
    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tbody > tr > td > select.form-control {
        min-height: 42px;
        border-color: #dfe6ea;
        background: #ffffff;
    }

    .financial-purchase-view.purchase-creation-view #ifdevtabletv > tfoot > tr > td {
        padding: 12px 14px;
        border: 1px dashed #b9deda !important;
        border-radius: 10px;
        background: #f5fbfa;
    }

    .financial-purchase-view.purchase-creation-view #ifdevtabletv .btn-danger {
        width: 100%;
        min-height: 40px;
        border-color: #f5c2c7;
        background: #fff7f8;
    }

    .financial-purchase-view.purchase-creation-view .asg-add-line-btn {
        width: 100%;
        min-height: 38px;
        justify-content: center;
    }

    .financial-purchase-view.purchase-creation-view .totals-card {
        margin: 0.55rem 0 0;
        padding: 16px;
    }

    .financial-purchase-view.purchase-creation-view .totals-row {
        gap: 16px;
    }

    .financial-purchase-view.purchase-creation-view .totals-row > .form-group {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (max-width: 575.98px) {
    .financial-purchase-view.purchase-creation-view .asg-form-actions-top {
        grid-template-columns: 1fr;
        padding-right: 0;
        padding-left: 0;
    }

    .financial-purchase-view.purchase-creation-view .totals-row > .form-group {
        flex-basis: 100%;
    }

    .financial-purchase-view.purchase-creation-view .col-sm-3,
    .financial-purchase-view.purchase-creation-view .col-sm-6,
    .financial-purchase-view.purchase-creation-view .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

:root[data-theme="dark"] .financial-purchase-view.purchase-creation-view .asg-form-shell,
:root[data-theme="dark"] .financial-purchase-view.purchase-creation-view .asg-form-shell > .asg-tabs-wrapper {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Accounts payable/receivable: shared create, list and detail language. */
.financial-account-view {
    min-width: 0;
    color: #0b2e32;
}

.financial-account-view > .row {
    --bs-gutter-x: 0;
    margin-right: 0;
    margin-left: 0;
}

.financial-account-view > .row > .container-fluid {
    display: block;
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-right: 0;
    padding-left: 0;
}

.payment-create-view {
    padding-bottom: calc(var(--asg-footer-h, 44px) + 1.5rem) !important;
}

.payment-create-view .asg-form-shell,
.payment-create-view .asg-form-shell > .asg-tabs-wrapper {
    position: relative;
    overflow: visible;
    margin-bottom: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.payment-create-view .asg-form-actions-top {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-create-view .asg-form-shell > .asg-tabs-wrapper > .asg-tabs-nav {
    padding: 10px 280px 4px 0;
}

.payment-create-view .asg-form-shell > .asg-tabs-wrapper > .tab-content {
    margin: 0 !important;
    padding: 0.45rem 0.5rem 0 !important;
}

.payment-create-view .asg-tab-pane,
.payment-create-view .asg-tab-pane > .m-3 {
    padding: 0 !important;
}

.payment-create-view .asg-tab-pane > .m-3 {
    margin: 0 !important;
}

.payment-create-view .payment-form-content {
    padding: 0.25rem 0.15rem 0 !important;
}

.payment-create-view .payment-form-section {
    padding: 0.45rem 0.25rem 0.15rem;
    border-bottom: 1px solid #edf1f3;
}

.payment-create-view .payment-form-section--last {
    border-bottom: 0;
}

.payment-create-view .payment-form-section__title {
    margin: 0 0 0.45rem;
    color: #0b2e32;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.payment-made-create-view .payment-form-section,
.payment-made-detail-view .payment-form-section,
.payment-received-create-view .payment-form-section,
.payment-received-detail-view .payment-form-section,
.payment-expense-create-view .payment-form-section,
.payment-expense-detail-view .payment-form-section {
    border-bottom: 0;
    padding: 0.45rem 0.25rem 0.35rem;
}

.payment-made-create-view .payment-form-section + .payment-form-section,
.payment-made-detail-view .payment-form-section + .payment-form-section,
.payment-received-create-view .payment-form-section + .payment-form-section,
.payment-received-detail-view .payment-form-section + .payment-form-section,
.payment-expense-create-view .payment-form-section + .payment-form-section,
.payment-expense-detail-view .payment-form-section + .payment-form-section {
    margin-top: 0.45rem;
}

.payment-made-create-view .payment-form-section__title,
.payment-made-detail-view .payment-form-section__title,
.payment-received-create-view .payment-form-section__title,
.payment-received-detail-view .payment-form-section__title,
.payment-expense-create-view .payment-form-section__title,
.payment-expense-detail-view .payment-form-section__title {
    align-items: center;
    background: #f1f7f6;
    border: 1px solid #e3ecea;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(11, 46, 50, 0.08);
    color: #143238;
    display: flex;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 0.8rem;
    padding: 0.5rem 0.7rem;
    text-transform: none;
}

.payment-create-view .asg-field {
    min-width: 0;
    margin-bottom: 0.55rem;
}

.payment-create-view .asg-field > label {
    display: block;
    margin: 0 0 0.4rem;
    overflow: hidden;
    color: #0b2e32;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-create-view .asg-input,
.payment-create-view .ts-wrapper.asg-input .ts-control {
    min-height: 40px;
    font-size: 0.9rem;
}

.payment-create-view textarea.asg-input {
    min-height: 72px;
    resize: vertical;
}

.financial-account-list-view {
    width: 100%;
    max-width: 100%;
    /* El espacio para el footer fijo lo aporta .content-wrapper:has(.asg-fill-view);
       un padding-bottom aquí además restaba alto al panel y lo empujaba fuera de la
       pantalla, provocando el scroll "suelto" de la página. */
}

.financial-account-list-view > .card {
    /* El .card ocupa el alto disponible (.asg-fill-view) y su .card-body scrollea por
       dentro; recortar el card mantiene el scroll contenido y el encabezado fijo. Los
       menús de acción usan position: fixed, así que recortar no los afecta. */
    overflow: hidden;
    border: 1px solid #e5e9ed !important;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04) !important;
}

.financial-account-list-view .asg-table-wrapper {
    max-width: 100%;
}

.financial-account-detail-view,
.financial-payment-detail-view {
    padding-bottom: calc(var(--asg-footer-h, 44px) + 1.5rem) !important;
}

.financial-account-view.financial-account-detail-view .detail-header,
.financial-account-view.financial-payment-detail-view .detail-header {
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04);
}

.financial-account-view.financial-account-detail-view .card,
.financial-account-view.financial-payment-detail-view .card {
    margin-top: 0.8rem !important;
    border: 1px solid #e5e9ed !important;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04) !important;
}

.financial-account-detail-view .asg-tabs-wrapper {
    margin: 0 0.5rem 0.65rem;
}

.financial-account-detail-view .asg-tabs-wrapper > .tab-content {
    margin: 0 !important;
    padding: 0.35rem 0.5rem 0 !important;
}

.financial-account-detail-view .account-summary-grid {
    row-gap: 0;
}

.financial-account-detail-view .account-summary-group {
    min-width: 0;
    padding: 0 1rem;
    border-right: 1px solid #edf1f3;
}

.financial-account-detail-view .account-summary-group:first-child {
    padding-left: 0;
}

.financial-account-detail-view .account-summary-group:last-child {
    padding-right: 0;
    border-right: 0;
}

.financial-account-detail-view .account-summary-group p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 0.55rem;
    color: #51606d;
}

.financial-account-detail-view .account-summary-group p strong {
    flex: 0 0 auto;
    color: #0b2e32;
    font-size: 0.82rem;
    font-weight: 700;
}

.financial-payment-detail-view .asg-tab-pane > .m-3 > .row > .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
}

.financial-payment-detail-view .asg-tab-pane > .m-3 > .row > .col-md-3,
.financial-payment-detail-view .asg-tab-pane > .m-3 > .row > .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
}

.financial-payment-detail-view .asg-tab-pane > .m-3 > .row {
    row-gap: 0;
}

.financial-payment-detail-view .asg-field {
    margin-bottom: 0.55rem;
}

.financial-payment-detail-view .asg-field > label {
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: .4rem;
}

.document-detail-shell.payment-detail-tabs-shell > .asg-tabs-wrapper > .asg-tabs-nav {
    padding-right: 270px;
}

/* En los detalles de pagos, Cancelar e Historial pertenecen a la barra del tab.
   La regla responsive general de detalles los convertía en una fila separada. */
.document-detail-shell.payment-detail-tabs-shell > .document-detail-actions-top {
    align-items: center;
    display: flex;
    gap: 8px;
    grid-template-columns: none;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 6px;
}

@media (max-width: 1024px) {
    .financial-account-view {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .payment-create-view,
    .financial-account-detail-view,
    .financial-payment-detail-view {
        margin-top: 0 !important;
        padding: 0 8px calc(var(--asg-footer-h, 44px) + 3.5rem) !important;
    }

    .document-detail-shell.payment-detail-tabs-shell > .asg-tabs-wrapper > .asg-tabs-nav {
        min-height: 54px;
        padding-right: 248px;
    }

    .document-detail-shell.payment-detail-tabs-shell > .document-detail-actions-top {
        gap: 6px;
        padding: 0;
        position: absolute;
        right: 6px;
        top: 6px;
    }

    .document-detail-shell.payment-detail-tabs-shell > .document-detail-actions-top .btn-asg {
        min-width: 106px;
        padding-left: .75rem;
        padding-right: .75rem;
        width: auto;
    }

    .payment-create-view .asg-form-actions-top {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        padding: 8px 0 10px;
    }

    .payment-create-view .asg-form-actions-top .btn,
    .payment-create-view .asg-form-actions-top button,
    .payment-create-view .asg-form-actions-top a {
        width: 100%;
    }

    .payment-create-view .asg-form-shell > .asg-tabs-wrapper > .asg-tabs-nav {
        overflow-x: auto;
        padding-right: 0;
    }

    .payment-create-view .asg-form-shell > .asg-tabs-wrapper > .tab-content {
        padding: 0.45rem 0 0 !important;
    }

    .payment-create-view .payment-form-section {
        padding: 0.55rem 0 0.2rem;
    }

    .financial-account-list-view {
        padding: 8px 8px calc(var(--asg-footer-h, 44px) + 3.5rem) !important;
    }

    .financial-account-list-view > .card {
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        box-shadow: none !important;
    }

    .financial-account-detail-view .detail-header,
    .financial-payment-detail-view .detail-header {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px;
    }

    .financial-account-detail-view .detail-header__actions,
    .financial-payment-detail-view .detail-header__actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100%;
        gap: 8px;
    }

    .financial-account-detail-view .detail-header__actions > *,
    .financial-payment-detail-view .detail-header__actions > * {
        width: 100%;
    }

    .financial-account-detail-view .asg-table,
    .financial-account-detail-view .asg-table tbody,
    .financial-account-detail-view .asg-table tr,
    .financial-account-detail-view .asg-table td {
        width: 100%;
    }

    .financial-account-detail-view .asg-tabs-wrapper {
        margin-right: 0;
        margin-left: 0;
    }

    .financial-account-detail-view .account-summary-group {
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid #edf1f3;
        margin-bottom: 0.5rem;
    }

    .financial-account-detail-view .account-summary-group:last-child {
        margin-bottom: 0;
        border-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    .document-detail-shell.payment-detail-tabs-shell > .asg-tabs-wrapper > .asg-tabs-nav {
        min-height: 50px;
        padding-right: 202px;
    }

    .document-detail-shell.payment-detail-tabs-shell > .document-detail-actions-top {
        gap: 4px;
        padding: 0;
        right: 4px;
        top: 5px;
    }

    .document-detail-shell.payment-detail-tabs-shell > .document-detail-actions-top .btn-asg {
        font-size: .72rem;
        min-width: 88px;
        padding: .6rem .55rem;
    }
}

@media (max-width: 575.98px) {
    .payment-create-view .asg-form-actions-top,
    .financial-account-detail-view .detail-header__actions,
    .financial-payment-detail-view .detail-header__actions {
        grid-template-columns: 1fr;
    }

    .payment-create-view .col-md-2,
    .payment-create-view .col-md-3,
    .payment-create-view .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .financial-account-detail-view .col-md-3,
    .financial-account-detail-view .col-md-4,
    .financial-account-detail-view .col-md-6,
    .financial-payment-detail-view .col-sm-3,
    .financial-payment-detail-view .col-sm-6,
    .financial-payment-detail-view .col-md-3,
    .financial-payment-detail-view .col-md-4,
    .financial-payment-detail-view .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .financial-payment-detail-view .asg-tab-pane > .m-3 > .row > .col-md-3,
    .financial-payment-detail-view .asg-tab-pane > .m-3 > .row > .col-md-4,
    .financial-payment-detail-view .asg-tab-pane > .m-3 > .row > .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

:root[data-theme="dark"] .financial-account-view {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .payment-create-view .asg-form-shell,
:root[data-theme="dark"] .payment-create-view .asg-form-shell > .asg-tabs-wrapper {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .payment-create-view .payment-form-section {
    border-bottom-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .payment-create-view .payment-form-section__title,
:root[data-theme="dark"] .payment-create-view .asg-field > label,
:root[data-theme="dark"] .financial-account-detail-view .account-summary-group p strong {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .payment-made-create-view .payment-form-section__title,
:root[data-theme="dark"] .payment-made-detail-view .payment-form-section__title,
:root[data-theme="dark"] .payment-received-create-view .payment-form-section__title,
:root[data-theme="dark"] .payment-received-detail-view .payment-form-section__title {
    background: #17292c;
    border-color: #2a4246;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .financial-account-detail-view .account-summary-group {
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .financial-account-detail-view .account-summary-group p {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .financial-account-list-view > .card,
:root[data-theme="dark"] .financial-account-list-view .card-header,
:root[data-theme="dark"] .financial-account-list-view .card-footer,
:root[data-theme="dark"] .financial-account-view.financial-account-detail-view .detail-header,
:root[data-theme="dark"] .financial-account-view.financial-payment-detail-view .detail-header,
:root[data-theme="dark"] .financial-account-view.financial-account-detail-view .card,
:root[data-theme="dark"] .financial-account-view.financial-account-detail-view .card-header,
:root[data-theme="dark"] .financial-account-view.financial-payment-detail-view .card,
:root[data-theme="dark"] .financial-account-view.financial-payment-detail-view .card-header {
    border-color: var(--asg-dark-border) !important;
    background: var(--asg-dark-surface) !important;
    box-shadow: none !important;
}

/* Supplier documents: shared mobile containment for create, edit and detail. */
@media (max-width: 1024px) {
    .supplier-document-view {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        padding-right: 8px;
        padding-bottom: calc(var(--asg-footer-h, 44px) + 3.5rem) !important;
        padding-left: 8px;
    }

    .supplier-document-view > .row {
        --bs-gutter-x: 0;
        margin-right: 0;
        margin-left: 0;
    }

    .supplier-document-view > .row > .container-fluid {
        display: block;
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-right: 0;
        padding-left: 0;
    }

    .supplier-document-view form,
    .supplier-document-view .asg-form-shell,
    .supplier-document-view .document-detail-shell,
    .supplier-document-view .asg-tabs-wrapper,
    .supplier-document-view .tab-content,
    .supplier-document-view .asg-tab-pane {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .supplier-document-view .asg-tab-pane > .m-3 {
        margin: 0 !important;
    }

    .supplier-document-view #PurchaseContainer {
        width: 100%;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0.8rem 0 0.55rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .supplier-document-view #ifdevtabletv,
    .supplier-document-view #ifdevtabletv > tbody,
    .supplier-document-view #ifdevtabletv > tfoot,
    .supplier-document-view #ifdevtabletv > tbody > tr,
    .supplier-document-view #ifdevtabletv > tfoot > tr,
    .supplier-document-view #ifdevtabletv > tfoot > tr > td {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .supplier-document-view #ifdevtabletv > tbody > tr > td > input,
    .supplier-document-view #ifdevtabletv > tbody > tr > td > select,
    .supplier-document-view #ifdevtabletv > tbody > tr > td > .ts-wrapper,
    .supplier-document-view #ifdevtabletv > tbody > tr > td .ts-control {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .supplier-document-view #ifdevtabletv .ts-control .item {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .supplier-document-view .comments-card,
    .supplier-document-view .totals-card {
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .supplier-document-view .asg-form-actions-top,
    .supplier-document-view .document-detail-actions-top,
    .supplier-document-view .detail-header__actions {
        grid-template-columns: 1fr;
    }

    .supplier-document-view .col-sm-3,
    .supplier-document-view .col-sm-6,
    .supplier-document-view .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --- Legacy View Bridge --- */
.asg-modern-view {
    font-size: 13px;
}

.asg-modern-view .container,
.asg-modern-view .container-fluid {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.asg-modern-view .card {
    border: 1px solid #e5e9ed !important;
    border-radius: 8px !important;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04) !important;
}

.asg-modern-view .card-header {
    border-bottom: 1px solid #eef1f3 !important;
    background: #ffffff !important;
}

.asg-modern-view .card-body {
    background: #ffffff;
}

/* Panel propio (no usa .card de Bootstrap: el .card-body global de site.css fija height 70vh) */
.asg-panel {
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04);
}

.asg-panel__header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eef1f3;
    background: #ffffff;
    border-radius: 8px 8px 0 0;
}

.asg-panel__body {
    padding: 1rem;
    background: #ffffff;
    border-radius: 0 0 8px 8px;
}

.asg-panel__footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #eef1f3;
    background: #ffffff;
    border-radius: 0 0 8px 8px;
}

/* Aviso de cabecera y secciones de formulario. Vivían en sales-document-editor.css, que
   no todas las pantallas cargan (el detalle de entrega usaba el aviso sin estilo). */
.asg-note-inline {
    margin: 0 0 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #cfe3e0;
    border-radius: 8px;
    background: #f3f9f8;
    color: #365a56;
    font-size: 0.88rem;
    line-height: 1.45;
}

.asg-note-inline a {
    color: var(--asg-btn-submit, #10403b);
    font-weight: 600;
}

:root[data-theme="dark"] .asg-note-inline {
    background: var(--asg-dark-surface-2, #162225);
    border-color: var(--asg-dark-border, #27383c);
    color: var(--asg-dark-muted, #9aa9ad);
}

:root[data-theme="dark"] .asg-note-inline a {
    color: #85d8d0;
}

/* Advertencia ASG: reemplaza a .alert-warning de Bootstrap en avisos que piden
   atención (acciones irreversibles, datos incompletos) sin llegar a ser un error. */
.asg-note-inline--warning {
    border-color: #f3dcae;
    background: #fdf8ee;
    color: #7a4b00;
}

.asg-note-inline--warning strong {
    color: #6b3f00;
}

:root[data-theme="dark"] .asg-note-inline--warning {
    border-color: rgba(243, 189, 91, .3);
    background: rgba(243, 189, 91, .08);
    color: #f3cf8e;
}

:root[data-theme="dark"] .asg-note-inline--warning strong {
    color: #f8dca8;
}

/* Secciones con título dentro de un asg-panel__body: agrupan los campos de un formulario
   largo (fechas, cumplimiento, transporte, líneas) separados por una línea fina. */
.asg-form-section {
    padding: 1.1rem 0;
    border-top: 1px solid var(--asg-border-light, #e6e6e6);
}

.asg-panel__body > .asg-form-section:first-child,
.asg-note-inline + .asg-form-section {
    padding-top: 0;
    border-top: 0;
}

.asg-form-section__title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--asg-shadow, #0b2e32);
    margin: 0 0 .75rem;
}

.asg-form-section__textarea {
    resize: vertical;
    min-height: 5.5rem;
}

:root[data-theme="dark"] .asg-form-section {
    border-top-color: var(--asg-dark-border, #27383c);
}

:root[data-theme="dark"] .asg-form-section__title {
    color: var(--asg-dark-text, #dceceb);
}

.asg-modern-view .asg-form-shell,
.asg-modern-view .asg-tabs-wrapper {
    overflow: hidden;
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04);
}

.asg-modern-view .asg-form-shell > .asg-tabs-wrapper {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.asg-modern-view .asg-tabs-nav {
    border-bottom: 1px solid #eef1f3;
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 4px;
}

.asg-modern-view .asg-form-shell > .asg-tabs-wrapper > .asg-tabs-nav {
    padding-right: 280px;
}

.asg-modern-view .asg-form-actions-top {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}

.asg-modern-view .asg-form-shell {
    position: relative;
}

.asg-modern-view .asg-tabs-wrapper > .tab-content {
    margin: 0 !important;
    padding: 0.55rem 0.65rem 0 !important;
}

.asg-modern-view .asg-tab-pane {
    padding: 0 !important;
}

.asg-modern-view .asg-tab-pane > .m-3 {
    margin: 0 !important;
}

.asg-modern-view .row {
    row-gap: 6px;
}

.asg-modern-view .form-group,
.asg-modern-view .asg-field,
.asg-modern-view .mb-2 {
    margin-bottom: 0.55rem;
}

.asg-modern-view label:not(.form-check-label),
.asg-modern-view .form-label,
.asg-modern-view .control-label {
    display: block;
    margin-top: 0.25rem;
    margin-bottom: 0.42rem;
    overflow: hidden;
    color: #0b2e32;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asg-modern-view .form-control,
.asg-modern-view .form-select,
.asg-modern-view .form-control-sm,
.asg-modern-view .form-select-sm {
    min-height: 41px;
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    background-color: #ffffff;
    color: #0b2e32;
    font-size: 0.9rem;
    box-shadow: none;
}

.asg-modern-view textarea.form-control {
    min-height: 78px;
}

.asg-modern-view .form-control:focus,
.asg-modern-view .form-select:focus {
    border-color: #0b2e32;
    box-shadow: 0 0 0 3px rgba(11, 46, 50, 0.08);
}

.asg-modern-view .form-control[readonly],
.asg-modern-view .form-control:disabled,
.asg-modern-view .form-select:disabled {
    border-color: #e5e9ed;
    background-color: #f6f8fa;
    color: #51606d;
}

.asg-modern-view strong.d-block {
    margin-top: 0.85rem !important;
    color: #0b2e32;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.asg-modern-view hr {
    margin: 0.45rem 0 0.75rem;
    border-color: #e5e9ed;
    opacity: 1;
}

.asg-modern-view .alert.alert-light {
    margin: 0 0.5rem 0.75rem;
    border: 1px solid #e5e9ed !important;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(11, 46, 50, 0.04);
}

.asg-modern-view .table-responsive {
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    background: #ffffff;
}

.asg-modern-view table.table {
    margin-bottom: 0;
    color: #0b2e32;
    font-size: 0.88rem;
}

.asg-modern-view table.table > thead > tr > th {
    border-bottom: 1px solid #e5e9ed;
    background: #f8fafb;
    color: #4a5560;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.15;
    padding: 12px 14px;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.asg-modern-view table.table > tbody > tr > td {
    border-bottom: 1px solid #eef2f5;
    padding: 12px 14px;
    vertical-align: middle;
}

.asg-modern-view table.table > tbody > tr:hover > td {
    box-shadow: inset 0 -2px 0 #789a99;
}

.asg-modern-view .btn.bg-if-primario,
.asg-modern-view .btn.btn-primary,
.asg-modern-view .btn.btn-success {
    border: 0;
    border-radius: 4px;
    background-color: var(--asg-btn-submit) !important;
    color: var(--if-white) !important;
    font-weight: 700;
    text-transform: uppercase;
}

.asg-modern-view .btn.bg-if-secundario,
.asg-modern-view .btn.bg-if-secundario-2,
.asg-modern-view .btn.btn-secondary {
    border: 0;
    border-radius: 4px;
    background-color: var(--asg-btn-regresar) !important;
    color: var(--if-white) !important;
    font-weight: 700;
    text-transform: uppercase;
}

.asg-modern-view .btn.btn-danger {
    border: 1px solid #f5c2c7;
    border-radius: 6px;
    background: #fff7f8;
    color: #b02a37;
    font-weight: 700;
}

.asg-modern-view p {
    margin-bottom: 0.45rem;
    color: #26333d;
}

.asg-modern-view p strong {
    color: #0b2e32;
}

.asg-modern-view .page-link {
    color: #0b2e32;
}

.asg-modern-view .page-item.active .page-link {
    border-color: #0b2e32;
    background: #0b2e32;
}

@media (max-width: 1024px) {
    .asg-modern-view {
        margin-top: 0 !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    .asg-modern-view .asg-form-shell,
    .asg-modern-view .asg-tabs-wrapper {
        overflow: visible;
    }

    .asg-modern-view .asg-form-shell > .asg-tabs-wrapper > .asg-tabs-nav {
        padding-right: 0;
        overflow-x: auto;
    }

    .asg-modern-view .asg-form-actions-top {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        padding: 8px 8px 10px;
    }

    .asg-modern-view .asg-form-actions-top .btn,
    .asg-modern-view .asg-form-actions-top button,
    .asg-modern-view .asg-form-actions-top a {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .asg-modern-view .asg-form-actions-top {
        grid-template-columns: 1fr;
        padding-left: 0;
        padding-right: 0;
    }
}

/* --- ASG Modals --- */
.asg-modal-content {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(11, 46, 50, 0.18);
}

.modal-content:not(.asg-modal-content) {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(11, 46, 50, 0.18);
}

.asg-modal-content .modal-header {
    align-items: center;
    color: var(--if-white);
    background: var(--asg-btn-submit);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 16px 18px;
}

.modal-content:not(.asg-modal-content) .modal-header {
    align-items: center;
    color: var(--if-white);
    background: var(--asg-btn-submit);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 16px 18px;
}

.asg-modal-content .modal-title {
    color: var(--if-white);
    font-size: 1.16rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.modal-content:not(.asg-modal-content) .modal-title {
    color: var(--if-white);
    font-size: 1.16rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.asg-modal-content .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
}

.modal-content:not(.asg-modal-content) .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
}

.asg-modal-content .btn-close:hover {
    opacity: 1;
}

.modal-content:not(.asg-modal-content) .btn-close:hover {
    opacity: 1;
}

.asg-modal-content .modal-body {
    color: #374151;
    padding: 18px;
}

.modal-content:not(.asg-modal-content) .modal-body {
    color: #374151;
    padding: 18px;
}

.asg-modal-content .modal-footer {
    gap: 10px;
    border-top: 1px solid var(--asg-border-light);
    padding: 14px 18px;
}

.modal-content:not(.asg-modal-content) .modal-footer {
    gap: 10px;
    border-top: 1px solid var(--asg-border-light);
    padding: 14px 18px;
}

.asg-modal-content .modal-footer > * {
    margin: 0;
}

.modal-content:not(.asg-modal-content) .modal-footer > * {
    margin: 0;
}

/* --- Historial de compras por línea --- */
.asg-reference-history {
    min-width: 128px;
    flex-wrap: nowrap;
}

.asg-reference-history .price-reference {
    min-width: 0;
    text-align: right;
    border-right: 0;
}

.asg-reference-history__button {
    flex: 0 0 34px;
    width: 34px;
    color: var(--asg-btn-submit);
    background: #eef5f4;
    border: 1px solid #ced8d7;
    border-left: 0;
    border-radius: 0 4px 4px 0;
    padding: 0;
}

.asg-reference-history__button:hover,
.asg-reference-history__button:focus-visible {
    color: var(--if-white);
    background: var(--asg-btn-submit);
    border-color: var(--asg-btn-submit);
}

.asg-reference-history__button:focus-visible {
    box-shadow: 0 0 0 3px var(--asg-select-focus-ring);
    outline: 0;
}

.asg-purchase-history {
    --bs-offcanvas-width: min(760px, 100vw);
    color: #243436;
    background: #ffffff;
    border-left: 1px solid #dce4e3;
    box-shadow: -14px 0 34px rgba(11, 46, 50, 0.16);
}

.asg-purchase-history__header {
    min-height: 74px;
    color: var(--if-white);
    background: var(--asg-btn-submit);
    border-bottom: 0;
    padding: 14px 18px;
}

.asg-purchase-history__heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.asg-purchase-history__icon {
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 1rem;
}

.asg-purchase-history .offcanvas-title {
    color: var(--if-white);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.asg-purchase-history__item {
    max-width: 590px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asg-purchase-history__body {
    display: flex;
    min-height: 0;
    flex-direction: column;
    padding: 0;
}

.asg-purchase-history__filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e9ed;
    background: #f8faf9;
}

.asg-purchase-history__filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.asg-purchase-history__filter-label {
    color: #526164;
    font-size: 0.75rem;
    font-weight: 700;
}

.asg-purchase-history__filter {
    min-width: 58px;
    color: #425457;
    background: #ffffff;
    border-color: #cfd9d8;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.asg-purchase-history__filter:hover,
.asg-purchase-history__filter.active {
    color: var(--if-white);
    background: var(--if-primary);
    border-color: var(--if-primary);
}

.asg-purchase-history__filter:disabled {
    color: #9aa5a6;
    background: #eef1f1;
    border-color: #d9dfdf;
}

.asg-purchase-history__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-bottom: 1px solid #e5e9ed;
    background: #ffffff;
}

.asg-purchase-history__summary[hidden] {
    display: none;
}

.asg-purchase-history__summary > div {
    min-width: 0;
    padding: 11px 14px;
    border-right: 1px solid #eef1f3;
}

.asg-purchase-history__summary > div:last-child {
    border-right: 0;
}

.asg-purchase-history__summary dt {
    overflow: hidden;
    margin: 0 0 2px;
    color: #6f7c7e;
    font-size: 0.68rem;
    font-weight: 700;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.asg-purchase-history__summary dd {
    overflow: hidden;
    margin: 0;
    color: var(--asg-shadow);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asg-purchase-history__state {
    display: flex;
    min-height: 220px;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6f7c7e;
    padding: 24px;
    text-align: center;
}

.asg-purchase-history__state > i {
    color: var(--if-primary);
    font-size: 1.1rem;
}

.asg-purchase-history__table-wrap {
    min-height: 0;
    flex: 1;
    overflow: auto;
}

.asg-purchase-history__table {
    min-width: 720px;
    font-size: 0.76rem;
}

.asg-purchase-history__table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.asg-purchase-history__table thead th {
    padding: 9px 10px;
    color: #435255;
    background: #eef3f2;
    border-bottom: 1px solid #d9e1e0;
    font-size: 0.67rem;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.asg-purchase-history__table tbody td {
    padding: 9px 10px;
    vertical-align: middle;
}

.asg-purchase-history__table .asg-history-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.asg-purchase-history__document {
    color: var(--asg-btn-submit);
    font-weight: 800;
    text-decoration: none;
}

.asg-purchase-history__document:hover {
    color: var(--if-primary);
    text-decoration: underline;
}

.asg-purchase-history__document-currency {
    display: block;
    color: #7a8789;
    font-size: 0.65rem;
}

@media (max-width: 767.98px) {
    .asg-purchase-history__filters {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .asg-purchase-history__filter-group {
        justify-content: space-between;
    }

    .asg-purchase-history__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .asg-purchase-history__summary > div:nth-child(2) {
        border-right: 0;
    }

    .asg-purchase-history__summary > div:nth-child(-n + 2) {
        border-bottom: 1px solid #eef1f3;
    }

    .asg-purchase-history__table {
        min-width: 0;
    }
}

/* --- ASG Document Detail Header --- */
.document-detail-view .detail-header {
    border: 1px solid #e5e9ed;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 8px 8px 18px rgba(11, 46, 50, 0.08), 0 1px 3px rgba(11, 46, 50, 0.05);
    gap: 16px;
    font-size: 0.96rem;
    line-height: 1.45;
    margin: 0 0.5rem 0.75rem;
    padding: 14px 18px !important;
}

.document-detail-view .detail-header__meta {
    min-width: 0;
    gap: 4px;
}

.document-detail-view .detail-header__destination {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    margin-top: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e9f7f4;
    color: #0b4b43;
    font-weight: 700;
}

.document-detail-view .detail-header__destination-label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #14776b;
}

.document-detail-view .detail-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.document-detail-view .asg-field > label {
    display: block;
    margin-top: 0.3rem;
    margin-bottom: 0.45rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-detail-view .asg-tabs-wrapper {
    margin-bottom: 0 !important;
}

.document-detail-view .asg-tabs-wrapper > .tab-content {
    margin: 0 !important;
    padding: 0.45rem 0.5rem 0 !important;
}

.document-detail-view .asg-tabs-wrapper .asg-tab-pane {
    padding: 0 !important;
}

.document-detail-view .asg-tabs-wrapper .asg-tab-pane > .m-3 {
    margin: 0 !important;
}

.document-detail-shell {
    position: relative;
}

.document-detail-shell > .asg-tabs-wrapper {
    margin-bottom: 0 !important;
}

.document-detail-shell > .asg-tabs-wrapper > .asg-tabs-nav {
    padding-top: 10px;
    padding-bottom: 4px;
    padding-right: 380px;
}

.document-detail-shell > .asg-tabs-wrapper > .tab-content {
    margin: 0 !important;
    padding: 0.45rem 0.5rem 0 !important;
}

.document-detail-shell > .asg-tabs-wrapper .asg-tab-pane {
    padding: 0 !important;
}

.document-detail-shell > .asg-tabs-wrapper .asg-tab-pane > .m-3 {
    margin: 0 !important;
}

.document-detail-actions-top {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 1024px) {
    .document-detail-view {
        margin-top: 0 !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    .document-detail-view .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .document-detail-view .detail-header {
        align-items: stretch !important;
        flex-direction: column;
        margin-bottom: 0.8rem !important;
    }

    .document-detail-view .detail-header__actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-detail-view .detail-header__actions a,
    .document-detail-view .detail-header__actions button,
    .document-detail-view .detail-header__actions .btn {
        width: 100%;
    }

    .document-detail-shell > .asg-tabs-wrapper > .asg-tabs-nav {
        padding-right: 0;
        overflow-x: auto;
    }

    .document-detail-actions-top {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        padding: 8px 8px 10px;
    }

    .document-detail-actions-top .btn,
    .document-detail-actions-top button,
    .document-detail-actions-top a {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .document-detail-actions-top {
        grid-template-columns: 1fr;
        padding-left: 0;
        padding-right: 0;
    }
}


/* --- ASG Badges --- */
.asg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 999px;
    border: 1.5px solid;
    font-family: inherit;
    line-height: 1.4;
    white-space: nowrap;
}

/* Revisión (índigo) */
.asg-badge--new {
    background-color: #eef0fe;
    border-color: #c7cdf7;
    color: #4338ca;
}

/* En proceso (azul) */
.asg-badge--active {
    background-color: #e7f3fd;
    border-color: #bcdcf8;
    color: #1d6fb8;
}

/* N/A (gris) */
.asg-badge--common {
    background-color: #eef0f2;
    border-color: #d4d9de;
    color: #4b5563;
}

/* Borrador (ámbar) */
.asg-badge--pending {
    background-color: #fdf3d8;
    border-color: #f2dda2;
    color: #8a6100;
}

/* Eliminado / Anulado (rojo) */
.asg-badge--danger {
    background-color: #fdeaea;
    border-color: #f6c6c9;
    color: #d03544;
}

/* Activo (verde) */
.asg-badge--success {
    background-color: #e6f7ec;
    border-color: #bfe6cd;
    color: #1c7f45;
}

/* Por vencer (naranja) */
.asg-badge--warning {
    background-color: #fdefe2;
    border-color: #f6d4ae;
    color: #b45309;
}

/* Pendiente (contorno verde oscuro) */
.asg-badge--outline {
    background-color: #ffffff;
    border-color: #14532d;
    color: #14532d;
}

/* Especial (violeta) */
.asg-badge--special {
    background-color: #f1ecfd;
    border-color: #dcd0f8;
    color: #6d28d9;
}

/* --- ASG Dark Mode --- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --if-primary: #5fb7af;
    --if-primary-dark: #dceceb;
    --if-primary-light: #7fd0c8;
    --if-accent: #7aa9a4;
    --if-white: #111a1d;
    --if-gray-light: #0d1416;
    --if-danger: #f87171;
    --asg-btn-regresar: #168477;
    --asg-btn-submit: #127369;
    --asg-btn-editar: #5f807c;
    --asg-btn-seg-b: #546866;
    --asg-btn-seg-c: #6b7476;
    --asg-shadow: #dceceb;
    --asg-border-light: #27383c;
    --asg-text-muted: #9aa9ad;
    --asg-bg-disabled: #192527;
    --asg-select-focus: #5fb7af;
    --asg-select-focus-ring: rgba(95, 183, 175, 0.16);
    --asg-select-option-active: #1c3439;
    --asg-dark-bg: #0d1416;
    --asg-dark-surface: #111a1d;
    --asg-dark-surface-2: #162225;
    --asg-dark-surface-3: #1c2a2e;
    --asg-dark-border: #27383c;
    --asg-dark-text: #dceceb;
    --asg-dark-muted: #9aa9ad;
    --bs-body-bg: #0d1416;
    --bs-body-bg-rgb: 13, 20, 22;
    --bs-body-color: #dceceb;
    --bs-body-color-rgb: 220, 236, 235;
    --bs-emphasis-color: #f4fbfa;
    --bs-emphasis-color-rgb: 244, 251, 250;
    --bs-secondary-color: #9aa9ad;
    --bs-secondary-bg: #162225;
    --bs-tertiary-bg: #1c2a2e;
    --bs-border-color: #27383c;
    --bs-light-rgb: 20, 32, 35;
    --bs-dark-rgb: 220, 236, 235;
    --bs-link-color-rgb: 169, 223, 218;
    --bs-link-hover-color-rgb: 117, 214, 205;
}

/* --- Dark Mode: TomSelect (socio de negocio, articulos y cualquier <select> potenciado) ---
   El wrapper de TomSelect hereda las clases del <select> original (p. ej. form-control),
   por lo que sin estas reglas queda con el fondo blanco por defecto de la libreria. */
:root[data-theme="dark"] .ts-wrapper .ts-control,
:root[data-theme="dark"] .ts-control {
    background: var(--asg-dark-surface-2) !important;
    border-color: var(--asg-dark-border) !important;
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .ts-control > input,
:root[data-theme="dark"] .ts-control .item {
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .ts-control > input::placeholder {
    color: var(--asg-dark-muted) !important;
}

:root[data-theme="dark"] .ts-wrapper.focus .ts-control,
:root[data-theme="dark"] .ts-control:focus-within {
    border-color: var(--asg-shadow) !important;
}

:root[data-theme="dark"] .ts-dropdown {
    background: var(--asg-dark-surface) !important;
    border-color: var(--asg-dark-border) !important;
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .ts-dropdown .option,
:root[data-theme="dark"] .ts-dropdown .no-results,
:root[data-theme="dark"] .ts-dropdown .optgroup-header {
    background: transparent !important;
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .ts-dropdown .option.active,
:root[data-theme="dark"] .ts-dropdown .option:hover,
:root[data-theme="dark"] .ts-dropdown .active {
    background: var(--asg-dark-surface-3) !important;
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .ts-wrapper.disabled .ts-control,
:root[data-theme="dark"] .ts-control.disabled {
    background: var(--asg-bg-disabled) !important;
    color: var(--asg-dark-muted) !important;
}

:root[data-theme="dark"] body {
    background: var(--asg-dark-bg);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .main-content,
:root[data-theme="dark"] .content-wrapper,
:root[data-theme="dark"] main.container-fluid {
    background: var(--asg-dark-bg);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .top-header,
:root[data-theme="dark"] footer,
:root[data-theme="dark"] footer.bg-white {
    background: var(--asg-dark-surface) !important;
    border-color: var(--asg-dark-border) !important;
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .header-breadcrumb,
:root[data-theme="dark"] .header-breadcrumb .crumb-sep,
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] small.text-muted {
    color: var(--asg-dark-muted) !important;
}

:root[data-theme="dark"] .header-title-block h3,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] p,
:root[data-theme="dark"] label,
:root[data-theme="dark"] .form-label {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .asg-modern-view p strong {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .sidebar-header {
    background-color: #071416;
    border-color: #17282c;
}

:root[data-theme="dark"] .sidebar-nav .nav-link:hover {
    background-color: #14282d !important;
}

:root[data-theme="dark"] .drpodown-menu-backgroung,
:root[data-theme="dark"] .sidebar-nav .dropdown-menu {
    background-color: #0e2024 !important;
}

:root[data-theme="dark"] .drpodown-color-selector,
:root[data-theme="dark"] .sidebar-nav .dropdown-item {
    color: #dceceb !important;
}

:root[data-theme="dark"] .drpodown-color-selector:hover,
:root[data-theme="dark"] .drpodown-color-selector:focus,
:root[data-theme="dark"] .sidebar-nav .dropdown-item:hover,
:root[data-theme="dark"] .sidebar-nav .dropdown-item:focus {
    background-color: #183237 !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .if-menu-section {
    color: rgba(220, 236, 235, 0.44);
    border-color: rgba(220, 236, 235, 0.08);
}

:root[data-theme="dark"] .asg-connection-status {
    background: rgba(95, 183, 175, 0.12);
    border-color: rgba(95, 183, 175, 0.22);
    color: #dceceb;
}

:root[data-theme="dark"] .global-search input {
    background: #0f181a;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .global-search input:hover,
:root[data-theme="dark"] .global-search input:focus {
    background: #152225;
    border-color: #5fb7af;
    box-shadow: 0 0 0 3px rgba(95, 183, 175, 0.16);
}

:root[data-theme="dark"] .global-search input::placeholder,
:root[data-theme="dark"] .global-search .search-icon {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .global-search .search-shortcut {
    background: #172427;
    border-color: var(--asg-dark-border);
    color: #b7c8cb;
}

:root[data-theme="dark"] .global-search__panel {
    background: var(--asg-dark-surface);
    border-color: var(--asg-dark-border);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}

:root[data-theme="dark"] .global-search__status,
:root[data-theme="dark"] .global-search__group,
:root[data-theme="dark"] .global-search__subtitle,
:root[data-theme="dark"] .global-search__meta {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .global-search__item {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .global-search__item:hover,
:root[data-theme="dark"] .global-search__item:focus,
:root[data-theme="dark"] .global-search__item.is-active {
    background: var(--asg-dark-surface-2);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .global-search__badge {
    background: rgba(95, 183, 175, 0.14);
    border-color: rgba(95, 183, 175, 0.26);
    color: #cdebe8;
}

:root[data-theme="dark"] .header-icon-btn {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .header-icon-btn:hover,
:root[data-theme="dark"] .header-icon-btn[aria-expanded="true"] {
    background: #172427;
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .header-icon-btn img {
    filter: brightness(0) invert(1) opacity(0.86);
}

.theme-toggle-btn {
    color: #27484f;
}

.theme-toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

/* El sol partido es un SVG en línea, no un glifo: se alinea a mano igual que
   lo hace Bootstrap Icons con sus iconos. */
.theme-toggle-sun-split {
    vertical-align: -0.125em;
}

.theme-toggle-icon--dark {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-icon--light {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-icon--dark {
    display: inline-block;
}

:root[data-theme="dark"] .theme-toggle-btn {
    color: #ffffff;
}

:root[data-theme="dark"] .user-menu-trigger {
    background: #111a1d;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .user-menu-trigger:hover {
    background: #172427;
    border-color: #375058;
}

:root[data-theme="dark"] .user-menu-trigger .user-name,
:root[data-theme="dark"] .user-menu-trigger::after {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .user-avatar-initials {
    background: #28575b;
    color: #eef9f8;
    border-color: #3c6d70;
}

:root[data-theme="dark"] .dropdown-menu {
    background: #111a1d;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

:root[data-theme="dark"] .dropdown-item,
:root[data-theme="dark"] .dropdown-item button,
:root[data-theme="dark"] .btn-link.dropdown-item {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus,
:root[data-theme="dark"] .dropdown-item.active {
    background: #1b2a2e;
    color: #ffffff;
}

:root[data-theme="dark"] .dropdown-divider {
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .shortcut-dropdown,
:root[data-theme="dark"] .notification-dropdown {
    background: #111a1d;
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .shortcut-header,
:root[data-theme="dark"] .notification-header,
:root[data-theme="dark"] .notification-footer {
    background: #142023;
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .shortcut-title,
:root[data-theme="dark"] .notification-title,
:root[data-theme="dark"] .notification-refresh {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .shortcut-item,
:root[data-theme="dark"] .notification-item {
    color: var(--asg-dark-text);
    border-color: #203338;
}

:root[data-theme="dark"] .shortcut-item:hover,
:root[data-theme="dark"] .notification-item:hover {
    background: #1b2a2e;
    color: #ffffff;
}

:root[data-theme="dark"] .shortcut-icon-wrapper,
:root[data-theme="dark"] .notification-count {
    background: #203338;
    color: #dceceb;
}

:root[data-theme="dark"] .notification-list,
:root[data-theme="dark"] .notification-empty {
    background: #111a1d;
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .notification-message,
:root[data-theme="dark"] .notification-area,
:root[data-theme="dark"] .notification-item-title span {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .notification-dot {
    border-color: #111a1d;
}

:root[data-theme="dark"] .asg-panel,
:root[data-theme="dark"] .asg-panel__header,
:root[data-theme="dark"] .asg-panel__body,
:root[data-theme="dark"] .asg-panel__footer,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-body,
:root[data-theme="dark"] .card-footer,
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .profile-panel,
:root[data-theme="dark"] .profile-info,
:root[data-theme="dark"] .profile-stat,
:root[data-theme="dark"] .detail-header,
:root[data-theme="dark"] .document-detail-view .detail-header,
:root[data-theme="dark"] .asg-form-shell,
:root[data-theme="dark"] .asg-tabs-wrapper,
:root[data-theme="dark"] .document-detail-shell,
:root[data-theme="dark"] .asg-modern-view .card,
:root[data-theme="dark"] .purchase-supplier-doc .asg-form-shell,
:root[data-theme="dark"] .purchase-supplier-doc.document-detail-view .document-detail-shell {
    background: var(--asg-dark-surface) !important;
    border-color: var(--asg-dark-border) !important;
    color: var(--asg-dark-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.38) !important;
}

/* Detalle: sin contenedor también en modo oscuro (igual que Oferta de Venta) */
:root[data-theme="dark"] .purchase-supplier-doc.document-detail-view .document-detail-shell {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .asg-reference-history__button {
    color: #b9d4d1;
    background: var(--asg-dark-surface-3);
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .asg-reference-history__button:hover,
:root[data-theme="dark"] .asg-reference-history__button:focus-visible {
    color: #ffffff;
    background: var(--if-primary);
    border-color: var(--if-primary);
}

:root[data-theme="dark"] .asg-purchase-history,
:root[data-theme="dark"] .asg-purchase-history__body,
:root[data-theme="dark"] .asg-purchase-history__summary {
    color: var(--asg-dark-text);
    background: var(--asg-dark-surface);
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .asg-purchase-history__filters,
:root[data-theme="dark"] .asg-purchase-history__table thead th {
    color: var(--asg-dark-text);
    background: var(--asg-dark-surface-2);
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .asg-purchase-history__filter {
    color: var(--asg-dark-text);
    background: var(--asg-dark-surface-3);
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .asg-purchase-history__filter:hover,
:root[data-theme="dark"] .asg-purchase-history__filter.active {
    color: #ffffff;
    background: var(--if-primary);
    border-color: var(--if-primary);
}

:root[data-theme="dark"] .asg-purchase-history__filter-label,
:root[data-theme="dark"] .asg-purchase-history__summary dt,
:root[data-theme="dark"] .asg-purchase-history__state,
:root[data-theme="dark"] .asg-purchase-history__document-currency {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .asg-purchase-history__summary,
:root[data-theme="dark"] .asg-purchase-history__summary > div,
:root[data-theme="dark"] .asg-purchase-history__table tbody td {
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .asg-purchase-history__summary dd,
:root[data-theme="dark"] .asg-purchase-history__document {
    color: #d9efec;
}

:root[data-theme="dark"] .param-card,
:root[data-theme="dark"] .menu-card,
:root[data-theme="dark"] .apx-card,
:root[data-theme="dark"] .apx-card .card-body {
    background: var(--asg-dark-surface) !important;
    border-color: var(--asg-dark-border) !important;
    color: var(--asg-dark-text) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
}

:root[data-theme="dark"] .param-value,
:root[data-theme="dark"] .menu-title,
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .apx-card h6 {
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .param-label,
:root[data-theme="dark"] .menu-subtitle {
    color: var(--asg-dark-muted) !important;
}

:root[data-theme="dark"] .apexcharts-text,
:root[data-theme="dark"] .apexcharts-xaxis-label,
:root[data-theme="dark"] .apexcharts-yaxis-label,
:root[data-theme="dark"] .apexcharts-legend-text,
:root[data-theme="dark"] .apexcharts-title-text {
    fill: var(--asg-dark-muted) !important;
    color: var(--asg-dark-muted) !important;
}

:root[data-theme="dark"] .apexcharts-gridline,
:root[data-theme="dark"] .apexcharts-xaxis line,
:root[data-theme="dark"] .apexcharts-yaxis line {
    stroke: #375058 !important;
}

:root[data-theme="dark"] .apexcharts-tooltip,
:root[data-theme="dark"] .apexcharts-tooltip-title {
    background: var(--asg-dark-surface-2) !important;
    border-color: var(--asg-dark-border) !important;
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .profile-info,
:root[data-theme="dark"] .profile-stat {
    background: var(--asg-dark-surface-2) !important;
}

:root[data-theme="dark"] .profile-title,
:root[data-theme="dark"] .profile-name,
:root[data-theme="dark"] .profile-section-title,
:root[data-theme="dark"] .profile-info__value,
:root[data-theme="dark"] .profile-stat__value {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .profile-subtitle,
:root[data-theme="dark"] .profile-email,
:root[data-theme="dark"] .profile-info__label,
:root[data-theme="dark"] .profile-stat__label {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .profile-badge {
    background: #203338;
    border-color: #33494e;
    color: #dceceb;
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-top,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-start,
:root[data-theme="dark"] .border-end {
    border-color: var(--asg-dark-border) !important;
}

:root[data-theme="dark"] .alert.alert-light,
:root[data-theme="dark"] .asg-validation-summary {
    background: #142023;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .asg-validation-summary__title {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .asg-validation-summary__body,
:root[data-theme="dark"] .asg-validation-summary__list {
    color: #ffb3b8;
}

:root[data-theme="dark"] .asg-input,
:root[data-theme="dark"] .asg-input-field,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-control-sm,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .form-select-sm,
:root[data-theme="dark"] .ts-wrapper.asg-input .ts-control,
:root[data-theme="dark"] .ts-control {
    background-color: #0f181a;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
    box-shadow: none;
}

:root[data-theme="dark"] .asg-input::placeholder,
:root[data-theme="dark"] .asg-input-field::placeholder,
:root[data-theme="dark"] .form-control::placeholder {
    color: #829498;
}

:root[data-theme="dark"] .asg-input-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe0df' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
}

:root[data-theme="dark"] .asg-input:focus,
:root[data-theme="dark"] .asg-input-field:focus,
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] .ts-wrapper.asg-input.focus .ts-control {
    background-color: #142023;
    border-color: #5fb7af;
    box-shadow: 0 0 0 3px rgba(95, 183, 175, 0.16);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .asg-input-readonly,
:root[data-theme="dark"] .asg-input:read-only,
:root[data-theme="dark"] .asg-input:disabled,
:root[data-theme="dark"] .form-control[readonly],
:root[data-theme="dark"] .form-control:disabled,
:root[data-theme="dark"] .form-select:disabled {
    background-color: #162225;
    border-color: #27383c;
    color: #9fb0b4;
}

:root[data-theme="dark"] .asg-modern-view strong.d-block {
    color: #cfe0df !important;
}

:root[data-theme="dark"] .asg-modern-view hr {
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .expense-module-view .asg-input:disabled,
:root[data-theme="dark"] .expense-module-view .form-control:disabled,
:root[data-theme="dark"] .expense-module-view .form-select:disabled {
    opacity: 1;
    -webkit-text-fill-color: #9fb0b4;
}

:root[data-theme="dark"] .ts-dropdown {
    background: #111a1d;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .ts-dropdown .option,
:root[data-theme="dark"] .ts-dropdown .optgroup-header {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .plugin-dropdown_input .dropdown-input {
    background: #0f181a;
    border-bottom-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
    caret-color: #7fd0c8;
}

:root[data-theme="dark"] .plugin-dropdown_input .dropdown-input:focus {
    border-bottom-color: var(--asg-select-focus);
    box-shadow: inset 0 -1px 0 var(--asg-select-focus);
}

:root[data-theme="dark"] .ts-dropdown .active,
:root[data-theme="dark"] .ts-dropdown .option.selected {
    background: #1c3439;
    color: #ffffff;
}

:root[data-theme="dark"] .asg-tabs-nav,
:root[data-theme="dark"] .asg-form-shell > .asg-tabs-wrapper > .asg-tabs-nav,
:root[data-theme="dark"] .document-detail-shell > .asg-tabs-wrapper > .asg-tabs-nav {
    background: var(--asg-dark-surface) !important;
    border-color: var(--asg-dark-border) !important;
}

:root[data-theme="dark"] .asg-tab-btn {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .asg-tab-btn:hover:not(.active),
:root[data-theme="dark"] .asg-tab-btn.active {
    color: #75d6cd;
    border-bottom-color: #75d6cd;
}

:root[data-theme="dark"] .asg-table-wrapper,
:root[data-theme="dark"] .table-responsive {
    background: var(--asg-dark-surface);
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .asg-table,
:root[data-theme="dark"] table.table {
    color: var(--asg-dark-text);
    background: var(--asg-dark-surface);
}

:root[data-theme="dark"] .asg-table thead th,
:root[data-theme="dark"] .table-light,
:root[data-theme="dark"] table.table > thead > tr > th {
    background: #172427 !important;
    color: #cfe0df !important;
    border-color: var(--asg-dark-border) !important;
}

:root[data-theme="dark"] .asg-inline-action {
    box-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}

:root[data-theme="dark"] .asg-inline-action:hover {
    box-shadow: 0 6px 0 rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .asg-inline-action:active {
    box-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .asg-table tbody td,
:root[data-theme="dark"] table.table > tbody > tr > td {
    color: #d2dfdd;
    border-color: #22353a !important;
}

/* La celda secundaria (User-Agent) conserva su tonalidad tenue: la regla
   general de arriba fija el color de toda td y la pisaría. */
:root[data-theme="dark"] .asg-table tbody td.asg-table__cell--fine {
    color: var(--asg-text-muted);
}

:root[data-theme="dark"] .asg-table tbody tr:nth-child(odd),
:root[data-theme="dark"] table.table > tbody > tr:nth-child(odd) {
    background: #111a1d;
}

:root[data-theme="dark"] .asg-table tbody tr:nth-child(even),
:root[data-theme="dark"] table.table > tbody > tr:nth-child(even) {
    background: #162225;
}

:root[data-theme="dark"] .asg-table tbody tr:hover > td,
:root[data-theme="dark"] table.table > tbody > tr:hover > td {
    box-shadow: inset 0 1px 0 #4c7778, inset 0 -2px 0 #4c7778;
}

:root[data-theme="dark"] .asg-table tbody tr:hover > td:last-child,
:root[data-theme="dark"] table.table > tbody > tr:hover > td:last-child {
    box-shadow: inset -1px 0 0 #4c7778, inset 0 1px 0 #4c7778, inset 0 -2px 0 #4c7778;
}

:root[data-theme="dark"] table.table > tbody > tr:hover > td:first-child {
    box-shadow: inset 1px 0 0 #4c7778, inset 0 1px 0 #4c7778, inset 0 -2px 0 #4c7778;
}

:root[data-theme="dark"] .asg-table tbody tr:hover,
:root[data-theme="dark"] .asg-modern-view table.table > tbody > tr:hover {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.34));
}

/* #ifdevtabletv usa class "table", así que el bloque table.table de arriba lo alcanzaría
   en modo oscuro; lo excluimos explícitamente (tabla de inputs, sin borde teal como en claro).
   El #id gana en especificidad sobre table.table, no hace falta !important. */
:root[data-theme="dark"] #ifdevtabletv > tbody > tr:hover > td {
    box-shadow: none;
}

@media (min-width: 1366px) {
    :root[data-theme="dark"] .card-body .asg-table-wrapper .asg-table thead th:first-child,
    :root[data-theme="dark"] .card-body .asg-table-wrapper .asg-table tbody td:first-child {
        box-shadow: 2px 0 0 #22353a;
    }

    :root[data-theme="dark"] .card-body .asg-table-wrapper .asg-table tbody tr:nth-child(odd) > td:first-child {
        background: #111a1d;
    }

    :root[data-theme="dark"] .card-body .asg-table-wrapper .asg-table tbody tr:nth-child(even) > td:first-child {
        background: #162225;
    }

    :root[data-theme="dark"] .card-body .asg-table-wrapper .asg-table tbody tr:hover > td:first-child {
        box-shadow: 2px 0 0 #22353a, inset 1px 0 0 #4c7778, inset 0 1px 0 #4c7778, inset 0 -2px 0 #4c7778;
        border-radius: 6px 0 0 6px;
    }
}

:root[data-theme="dark"] .asg-table__empty {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .asg-table tbody tr.asg-row-link:focus-within > td {
    background: rgba(95, 183, 175, 0.14);
}

:root[data-theme="dark"] .asg-table tbody tr.asg-row-link:focus-within > td:first-child {
    box-shadow: inset 3px 0 0 0 #5fb7af;
}

:root[data-theme="dark"] .asg-active-filters__label {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .asg-active-filters__chip {
    color: #cdebe8 !important;
    background: rgba(95, 183, 175, 0.14);
    border-color: rgba(95, 183, 175, 0.26);
}

/* Sobre fondo oscuro el rojo se aclara para mantener el contraste del texto. */
:root[data-theme="dark"] .asg-active-filters__chip:hover,
:root[data-theme="dark"] .asg-active-filters__chip:focus-visible {
    color: #ff9aa2 !important;
    background: rgba(239, 93, 82, 0.18);
    border-color: rgba(239, 93, 82, 0.42);
}

:root[data-theme="dark"] .asg-active-filters__chip:hover span[aria-hidden],
:root[data-theme="dark"] .asg-active-filters__chip:focus-visible span[aria-hidden] {
    background: rgba(239, 93, 82, 0.26);
}

:root[data-theme="dark"] .asg-table__link,
:root[data-theme="dark"] .asg-money,
:root[data-theme="dark"] td a.text-decoration-none {
    color: #a9dfda !important;
}

:root[data-theme="dark"] .asg-table__link:hover,
:root[data-theme="dark"] td a.text-decoration-none:hover {
    color: #75d6cd !important;
}

:root[data-theme="dark"] .asg-table__link--document {
    background: rgba(95, 183, 175, 0.14);
    border-color: rgba(95, 183, 175, 0.26);
    color: #cdebe8 !important;
}

:root[data-theme="dark"] .asg-table__link--document:hover,
:root[data-theme="dark"] .asg-table__link--document:focus {
    background: rgba(95, 183, 175, 0.22);
    border-color: rgba(95, 183, 175, 0.36);
}

:root[data-theme="dark"] .asg-add-line-btn {
    color: #75d6cd !important;
}

:root[data-theme="dark"] .asg-add-line-btn:hover,
:root[data-theme="dark"] .asg-add-line-btn:focus {
    color: #ffffff !important;
}

:root[data-theme="dark"] #ifdevtabletv > tfoot > tr > td,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv > tfoot > tr > td {
    background: var(--asg-dark-surface) !important;
    border-color: var(--asg-dark-border) !important;
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] table tfoot td:has(.asg-add-line-btn) {
    background: var(--asg-dark-surface) !important;
    border-color: var(--asg-dark-border) !important;
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] #ifdevtabletv > tfoot .asg-add-line-btn,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv > tfoot .asg-add-line-btn,
:root[data-theme="dark"] table tfoot .asg-add-line-btn {
    background: transparent !important;
    color: #75d6cd !important;
}

:root[data-theme="dark"] #PurchaseContainer,
:root[data-theme="dark"] .purchase-supplier-doc #PurchaseContainer {
    background: var(--asg-dark-surface) !important;
    border-color: var(--asg-dark-border) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.38) !important;
}

:root[data-theme="dark"] #ifdevtabletv,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv {
    color: var(--asg-dark-text);
    background: var(--asg-dark-surface);
}

:root[data-theme="dark"] #ifdevtabletv > thead > tr > th,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv > thead > tr > th {
    background: #172427 !important;
    border-color: var(--asg-dark-border) !important;
    color: #cfe0df !important;
}

:root[data-theme="dark"] #ifdevtabletv > tbody > tr > td,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv > tbody > tr > td {
    border-color: #22353a !important;
}

:root[data-theme="dark"] #ifdevtabletv > tbody > tr > td > input.form-control,
:root[data-theme="dark"] #ifdevtabletv > tbody > tr > td > select.form-control,
:root[data-theme="dark"] #ifdevtabletv > tbody > tr > td > .asg-input,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv > tbody > tr > td > input.form-control,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv > tbody > tr > td > select.form-control,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv > tbody > tr > td > .asg-input {
    background: #0f181a;
    border-color: #27383c;
    color: var(--asg-dark-text);
}

/* TomSelect (buscar artículo) dentro de la tabla de detalle */
:root[data-theme="dark"] #ifdevtabletv .ts-wrapper .ts-control,
:root[data-theme="dark"] #ifdevtabletv .ts-control,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv .ts-control {
    background-color: #0f181a !important;
    border-color: #27383c !important;
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] #ifdevtabletv .ts-control > input,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv .ts-control > input {
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] #ifdevtabletv .ts-control > input::placeholder,
:root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv .ts-control > input::placeholder {
    color: #829498 !important;
}

:root[data-theme="dark"] #ifdevtabletv .ts-wrapper.focus .ts-control {
    border-color: #5fb7af !important;
    box-shadow: 0 0 0 2px rgba(95, 183, 175, 0.16) !important;
}

/* Hover/focus de celdas en la tabla de detalle (evita el flash blanco) */
:root[data-theme="dark"] #ifdevtabletv > tbody > tr > td > input.form-control:hover,
:root[data-theme="dark"] #ifdevtabletv > tbody > tr > td > select.form-control:hover {
    background: #142023 !important;
    border-color: #34474c !important;
}

:root[data-theme="dark"] #ifdevtabletv > tbody > tr > td > input.form-control:focus,
:root[data-theme="dark"] #ifdevtabletv > tbody > tr > td > select.form-control:focus {
    background: #142023 !important;
    border-color: #5fb7af !important;
    box-shadow: 0 0 0 2px rgba(95, 183, 175, 0.16) !important;
}

:root[data-theme="dark"] #ifdevtabletv > tbody > tr > td > input.form-control[readonly] {
    background: #162225 !important;
    color: #9fb0b4 !important;
}

/* Botón borrar fila en la tabla de detalle */
:root[data-theme="dark"] #ifdevtabletv .btn-danger {
    background: transparent !important;
    border-color: transparent !important;
    color: #f87171 !important;
}

:root[data-theme="dark"] #ifdevtabletv .btn-danger:hover {
    background: rgba(248, 113, 113, 0.14) !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
    color: #fca5a5 !important;
}

:root[data-theme="dark"] .totals-card,
:root[data-theme="dark"] .purchase-supplier-doc .totals-card {
    background: var(--asg-dark-surface) !important;
    border-color: var(--asg-dark-border) !important;
}

:root[data-theme="dark"] .totals-row .control-label {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .totals-row input.form-control,
:root[data-theme="dark"] .totals-row input.form-control-sm {
    color: var(--asg-dark-text) !important;
    border-bottom-color: #375058 !important;
}

:root[data-theme="dark"] .totals-row .form-group:last-child input.form-control {
    color: #9df0e8 !important;
    border-bottom-color: #75d6cd !important;
}

:root[data-theme="dark"] .btn-asg:hover {
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] .btn.bg-if-primario,
:root[data-theme="dark"] .btn.btn-primary,
:root[data-theme="dark"] .btn.btn-success,
:root[data-theme="dark"] .asg-modern-view .btn.bg-if-primario,
:root[data-theme="dark"] .asg-modern-view .btn.btn-primary,
:root[data-theme="dark"] .asg-modern-view .btn.btn-success {
    background-color: var(--asg-btn-submit) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .btn.bg-if-secundario,
:root[data-theme="dark"] .btn.bg-if-secundario-2,
:root[data-theme="dark"] .btn.btn-secondary,
:root[data-theme="dark"] .asg-modern-view .btn.bg-if-secundario,
:root[data-theme="dark"] .asg-modern-view .btn.bg-if-secundario-2,
:root[data-theme="dark"] .asg-modern-view .btn.btn-secondary {
    background-color: #375058 !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .badge.if-badge-uso-general,
:root[data-theme="dark"] .asg-badge--active {
    background-color: #163a56;
    border-color: #2d6da8;
    color: #cfe8ff;
}

:root[data-theme="dark"] .badge.if-badge-inactivo,
:root[data-theme="dark"] .asg-badge--danger {
    background-color: #6b2e34;
    border-color: #b6535d;
    color: #ffe5e8;
}

:root[data-theme="dark"] .asg-badge--common {
    background: #203338;
    border-color: #375058;
    color: #dceceb;
}

:root[data-theme="dark"] .asg-badge--success {
    background: #18492d;
    border-color: #2f9d58;
    color: #d8f5e1;
}

:root[data-theme="dark"] .asg-badge--new {
    background: #2a1d4d;
    border-color: #6f48c9;
    color: #ddccff;
}

:root[data-theme="dark"] .asg-badge--pending {
    background: #4a3d12;
    border-color: #b89324;
    color: #f4e495;
}

:root[data-theme="dark"] .asg-badge--warning {
    background: #4d2f0e;
    border-color: #b06a1d;
    color: #ffd9ad;
}

:root[data-theme="dark"] .asg-badge--outline {
    background: transparent;
    border-color: #5fb7af;
    color: #a8ded9;
}

:root[data-theme="dark"] .asg-badge--special {
    background: #33204d;
    border-color: #7b4fc9;
    color: #e3d3ff;
}

:root[data-theme="dark"] .page-link,
:root[data-theme="dark"] .ifdev-pagination .page-item .page-link {
    background: #111a1d;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .page-item.active .page-link,
:root[data-theme="dark"] .ifdev-pagination .page-item.active .page-link {
    background: #127369;
    border-color: #127369;
    color: #ffffff;
}

:root[data-theme="dark"] .page-item.disabled .page-link,
:root[data-theme="dark"] .ifdev-pagination .page-item.disabled .page-link {
    background: #1b2a2e;
    border-color: #1b2a2e;
    color: #6f8287;
}

:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .asg-modal-content,
:root[data-theme="dark"] .modal-content:not(.asg-modal-content) {
    background: #111a1d;
    color: var(--asg-dark-text);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

:root[data-theme="dark"] .asg-modal-content .modal-header,
:root[data-theme="dark"] .modal-content:not(.asg-modal-content) .modal-header {
    background: #0f3837;
}

/* En tema oscuro --if-white se invierte a #111a1d, así que el título del
   modal (que lo usa como color de texto sobre el header verde) quedaba casi
   negro e ilegible. Se fija un blanco real. */
:root[data-theme="dark"] .asg-modal-content .modal-header,
:root[data-theme="dark"] .modal-content:not(.asg-modal-content) .modal-header,
:root[data-theme="dark"] .asg-modal-content .modal-title,
:root[data-theme="dark"] .modal-content:not(.asg-modal-content) .modal-title {
    color: #ffffff;
}

:root[data-theme="dark"] .modal-body,
:root[data-theme="dark"] .asg-modal-content .modal-body,
:root[data-theme="dark"] .modal-content:not(.asg-modal-content) .modal-body {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .asg-modal-content .modal-footer,
:root[data-theme="dark"] .modal-content:not(.asg-modal-content) .modal-footer {
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(190%);
}

:root[data-theme="dark"] .toast {
    background: #111a1d;
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .avatar-option {
    background: #eef3f3;
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .avatar-option img {
    border-radius: 50%;
}

:root[data-theme="dark"] .avatar-option:hover,
:root[data-theme="dark"] .avatar-option.selected {
    border-color: #75d6cd;
    background: #ffffff;
}

:root[data-theme="dark"] img#headerAvatarImage {
    background: #eef3f3 !important;
}

:root[data-theme="dark"] .footer-logo {
    filter: brightness(0) invert(1) opacity(0.82);
}

@media (max-width: 1365.98px) {
    :root[data-theme="dark"] .asg-table tbody tr,
    :root[data-theme="dark"] #ifdevtabletv > tbody > tr,
    :root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv > tbody > tr {
        background: var(--asg-dark-surface) !important;
        border-color: var(--asg-dark-border);
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.38);
    }

    :root[data-theme="dark"] .asg-table tbody td,
    :root[data-theme="dark"] #ifdevtabletv > tbody > tr > td,
    :root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv > tbody > tr > td {
        border-bottom-color: #22353a !important;
    }

    :root[data-theme="dark"] .asg-table tbody td::before,
    :root[data-theme="dark"] #ifdevtabletv > tbody > tr > td[data-label]::before,
    :root[data-theme="dark"] .purchase-supplier-doc #ifdevtabletv > tbody > tr > td[data-label]::before {
        color: #9fd4cf;
    }

    :root[data-theme="dark"] .asg-table tbody tr:hover {
        filter: none;
    }

    :root[data-theme="dark"] .asg-table tbody tr:hover > td,
    :root[data-theme="dark"] .asg-table tbody tr:hover > td:first-child,
    :root[data-theme="dark"] .asg-table tbody tr:hover > td:last-child {
        border-radius: 0;
        box-shadow: none;
    }

    :root[data-theme="dark"] .asg-table:not(#ifdevtabletv):not(.journal-lines-table):not(:has(tbody input:not([type="hidden"]), tbody select, tbody textarea, tbody [contenteditable="true"]))
        tbody tr:not(:has(.asg-table__empty)):hover,
    :root[data-theme="dark"] .asg-table:not(#ifdevtabletv):not(.journal-lines-table):not(:has(tbody input:not([type="hidden"]), tbody select, tbody textarea, tbody [contenteditable="true"]))
        tbody tr:not(:has(.asg-table__empty)):focus-within {
        border-color: #4c7778;
        box-shadow: 0 5px 12px rgba(0, 0, 0, .48);
    }

    :root[data-theme="dark"] #PurchaseContainer,
    :root[data-theme="dark"] .purchase-supplier-doc #PurchaseContainer {
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* --- ASG Actions Button (dropdown trigger) --- */
.asg-actions-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #bfbfbf;
    color: var(--asg-shadow);
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.asg-actions-btn:hover {
    background-color: #a8a8a8;
}

.asg-actions-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 46, 50, 0.15);
}

.asg-actions-btn__caret {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.asg-actions-btn[aria-expanded="true"] .asg-actions-btn__caret {
    transform: rotate(180deg);
}

/* --- ASG Dark Mode Final Overrides --- */
:root[data-theme="dark"] .asg-actions-btn {
    background-color: #203338;
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .asg-actions-btn:hover,
:root[data-theme="dark"] .asg-actions-btn:focus {
    background-color: #2a4247;
    color: #ffffff;
}

:root[data-theme="dark"] .asg-actions-btn:focus {
    box-shadow: 0 0 0 3px rgba(95, 183, 175, 0.2);
}

:root[data-theme="dark"] .shortcut-active-item,
:root[data-theme="dark"] .list-group-item {
    background: #142023;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .shortcut-active-item:hover,
:root[data-theme="dark"] .list-group-item:hover {
    background: #1b2a2e;
}

:root[data-theme="dark"] .shortcut-drag-handle,
:root[data-theme="dark"] .shortcut-order-badge {
    background: #203338;
    border-color: #375058;
    color: #dceceb;
}

:root[data-theme="dark"] .btn-add-shortcut,
:root[data-theme="dark"] .btn-outline-secondary,
:root[data-theme="dark"] .btn-outline-dark,
:root[data-theme="dark"] .btn-light {
    background: #142023;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .btn-add-shortcut:hover,
:root[data-theme="dark"] .btn-outline-secondary:hover,
:root[data-theme="dark"] .btn-outline-dark:hover,
:root[data-theme="dark"] .btn-light:hover {
    background: #203338;
    border-color: #375058;
    color: #ffffff;
}

:root[data-theme="dark"] .bg-light,
:root[data-theme="dark"] .bg-body,
:root[data-theme="dark"] .bg-body-tertiary,
:root[data-theme="dark"] .bg-body-secondary {
    background-color: #142023 !important;
}

:root[data-theme="dark"] .text-dark,
:root[data-theme="dark"] .text-body,
:root[data-theme="dark"] .text-black {
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .text-secondary,
:root[data-theme="dark"] .link-secondary {
    color: var(--asg-dark-muted) !important;
}

:root[data-theme="dark"] a,
:root[data-theme="dark"] .link-dark {
    color: #a9dfda;
}

:root[data-theme="dark"] a:hover,
:root[data-theme="dark"] .link-dark:hover {
    color: #75d6cd;
}

:root[data-theme="dark"] .input-group-text {
    background: #162225;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
}

/* Casillas, radios, interruptores y rangos con el verde de ASG en vez del azul de
   Bootstrap, en todo el sistema. accent-color cubre además los controles nativos que
   no llevan .form-check-input. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
    accent-color: var(--asg-btn-submit, #10403b);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--asg-btn-submit, #10403b);
    border-color: var(--asg-btn-submit, #10403b);
}

.form-check-input:focus,
.btn-check:focus + .btn,
.form-check-input:active {
    border-color: #7fbfb8;
    box-shadow: 0 0 0 .2rem rgba(18, 115, 105, .2);
}

.form-check-input:active {
    filter: none;
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237fbfb8'/%3e%3c/svg%3e");
}

.form-range::-webkit-slider-thumb {
    background-color: var(--asg-btn-submit, #10403b);
}

.form-range::-moz-range-thumb {
    background-color: var(--asg-btn-submit, #10403b);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(18, 115, 105, .25);
}

:root[data-theme="dark"] .form-check-input:focus {
    border-color: #5fb7af;
    box-shadow: 0 0 0 .2rem rgba(95, 183, 175, .25);
}

:root[data-theme="dark"] .form-check-input {
    background-color: #0f181a;
    border-color: #375058;
}

:root[data-theme="dark"] .form-check-input:checked {
    background-color: #127369;
    border-color: #127369;
}

:root[data-theme="dark"] .nav-tabs,
:root[data-theme="dark"] .nav-tabs .nav-link {
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .nav-tabs .nav-link:hover,
:root[data-theme="dark"] .nav-tabs .nav-link.active {
    background: #142023;
    color: #75d6cd;
    border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table-striped,
:root[data-theme="dark"] .table-hover {
    --bs-table-bg: var(--asg-dark-surface);
    --bs-table-color: var(--asg-dark-text);
    --bs-table-striped-bg: #162225;
    --bs-table-striped-color: var(--asg-dark-text);
    --bs-table-hover-bg: #1d2d31;
    --bs-table-hover-color: #ffffff;
    --bs-table-border-color: var(--asg-dark-border);
}

:root[data-theme="dark"] .alert-secondary,
:root[data-theme="dark"] .alert-info {
    background: #142023;
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .alert-danger {
    background: #32191d;
    border-color: #74313a;
    color: #ffdbe0;
}

:root[data-theme="dark"] .alert-warning {
    background: #342817;
    border-color: #806327;
    color: #ffe7ad;
}

:root[data-theme="dark"] .alert-success {
    background: #142d20;
    border-color: #2d6f48;
    color: #d8f5e1;
}

/* --- ASG Dark Mode: contrast & brutalist-shadow fixes --- */

/* (1) ASG buttons keep readable light text in dark mode
   (--if-white flips to a dark value, so it must be overridden here). */
:root[data-theme="dark"] .btn-asg,
:root[data-theme="dark"] .btn-asg:hover,
:root[data-theme="dark"] .btn-asg:active {
    color: #ffffff;
}

/* (2) Welcome banner: --asg-shadow flips to near-white, which would turn the
   banner into a bright panel. Pin it to a dark surface instead. */
:root[data-theme="dark"] .welcome-banner {
    background: var(--asg-dark-surface-2);
    border: 1px solid var(--asg-dark-border);
    color: var(--asg-dark-text);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .welcome-greeting {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .welcome-date {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .welcome-badge {
    background: #203338;
    color: var(--asg-dark-text);
}

/* (3) Hard "neo-brutalist" shadows use --asg-shadow (near-white in dark),
   which renders as bright halos. Recolor them to a dark shadow. */
:root[data-theme="dark"] .asg-checkbox-control__mark,
:root[data-theme="dark"] .asg-toggle-control__slider {
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .asg-toggle-control__slider::before {
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .asg-checkbox-control:hover .asg-checkbox-control__mark,
:root[data-theme="dark"] .asg-toggle-control:hover .asg-toggle-control__slider {
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .asg-search-bar::before {
    background-color: rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .asg-search-bar:focus-within {
    box-shadow: 0 0 0 3px rgba(95, 183, 175, 0.16);
}

:root[data-theme="dark"] .asg-search-bar__button {
    color: #ffffff;
    background-color: var(--asg-btn-submit);
}

:root[data-theme="dark"] .asg-search-bar__button:hover {
    background-color: var(--if-primary);
}

/* --- SweetAlert2 dark mode --- */
:root[data-theme="dark"] .swal2-popup {
    background: var(--asg-dark-surface) !important;
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .swal2-title,
:root[data-theme="dark"] .swal2-html-container,
:root[data-theme="dark"] .swal2-content,
:root[data-theme="dark"] .swal2-label,
:root[data-theme="dark"] .swal2-input,
:root[data-theme="dark"] .swal2-textarea {
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .swal2-input,
:root[data-theme="dark"] .swal2-textarea,
:root[data-theme="dark"] .swal2-select {
    background: var(--asg-dark-surface-2) !important;
    border-color: var(--asg-dark-border) !important;
}

:root[data-theme="dark"] .swal2-toast {
    background: var(--asg-dark-surface) !important;
    color: var(--asg-dark-text) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

:root[data-theme="dark"] .swal2-toast .swal2-title {
    color: var(--asg-dark-text) !important;
}

:root[data-theme="dark"] .swal2-cancel {
    background: var(--asg-dark-surface-3) !important;
    color: var(--asg-dark-text) !important;
}

/* --- Business Partners: contact detail/edit --- */
.partner-contact-view {
    font-size: 14px;
    padding: 1rem .75rem calc(var(--asg-footer-h, 44px) + env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
}

.partner-contact-header {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 46, 50, .05);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .85rem;
    padding: 1rem 1.1rem;
}

.partner-contact-title {
    color: #143238;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.partner-contact-subtitle {
    color: #6c7a86;
    font-size: .88rem;
    font-weight: 600;
    margin: .3rem 0 0;
    overflow-wrap: anywhere;
}

.partner-contact-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: flex-end;
}

.partner-contact-shell>.asg-tabs-wrapper>.asg-tabs-nav {
    padding-right: 12px;
}

.partner-contact-section {
    background: #f1f7f6;
    border: 1px solid #e3ecea;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(11, 46, 50, .08);
    color: #143238;
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 .8rem;
    max-width: 50%;
    padding: .5rem .7rem;
}

.partner-contact-fields-half {
    max-width: 50%;
}

@media (max-width: 991.98px) {
    .partner-contact-section,
    .partner-contact-fields-half {
        max-width: 100%;
    }
}

.partner-contact-view .asg-field>label,
.partner-contact-view .asg-choice-field__label {
    font-size: .95rem;
    font-weight: 700;
}

.partner-contact-view .asg-input {
    font-size: .95rem;
}

.partner-contact-toggle.asg-choice-field {
    margin-bottom: 0;
}

.partner-contact-toggle .asg-choice-control--disabled {
    opacity: 1;
}

:root[data-theme="dark"] .partner-contact-header {
    background: var(--asg-dark-surface);
    border-color: var(--asg-dark-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .38);
}

:root[data-theme="dark"] .partner-contact-title,
:root[data-theme="dark"] .partner-contact-section {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .partner-contact-subtitle {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .partner-contact-section {
    background: rgba(95, 183, 175, .12);
    border-color: rgba(95, 183, 175, .2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}

@media (max-width: 767.98px) {
    .partner-contact-view {
        padding: .65rem .35rem calc(var(--asg-footer-h, 44px) + env(safe-area-inset-bottom, 0px) + 2rem) !important;
    }

    .partner-contact-header,
    .partner-contact-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .partner-contact-actions .btn-asg {
        width: 100%;
    }

    .partner-contact-shell>.asg-tabs-wrapper>.asg-tabs-nav {
        display: flex;
        overflow-x: auto;
        padding: 6px 4px 0;
        scrollbar-width: none;
    }

    .partner-contact-shell>.asg-tabs-wrapper>.asg-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .partner-contact-shell .asg-tab-btn {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }

    .partner-contact-shell .asg-tab-pane>.m-3 {
        margin: .55rem !important;
    }

    .partner-contact-shell .row.g-3 {
        --bs-gutter-y: .65rem;
    }
}

/* --- Toasts Bootstrap con lenguaje visual ASG --- */
.toast-container.position-fixed {
    right: .75rem !important;
    bottom: calc(var(--asg-footer-h, 44px) + .75rem) !important;
    left: auto !important;
    z-index: 1200 !important;
    width: min(520px, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    padding: 0 !important;
}

.toast-container .toast {
    width: 100%;
    max-width: 100%;
    border: 1px solid #d7e4e2 !important;
    border-radius: 8px;
    box-shadow: 0 4px 0 var(--asg-shadow) !important;
    color: #17383a;
    font-family: var(--if-font-main);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}

.toast-container .toast:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 0 var(--asg-shadow) !important;
}

.toast-container .toast:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 0 var(--asg-shadow) !important;
}

.toast-container .toast .d-flex {
    gap: .9rem !important;
    padding: 1.2rem 1.3rem !important;
}

.toast-container .toast .d-flex > img,
.toast-container .toast .d-flex > i {
    display: none !important;
}

.toast-container .toast .fw-bold {
    font-size: .95rem !important;
    font-weight: 800 !important;
    letter-spacing: .03em;
    line-height: 1.2;
    margin-bottom: .2rem !important;
}

.toast-container .toast .fs-6,
.toast-container .toast .toast-body {
    font-size: 1.04rem !important;
    line-height: 1.42;
}

.toast-container .toast.text-white,
.toast-container .toast.text-dark {
    color: #17383a !important;
}

.toast-container .toast .text-white,
.toast-container .toast .text-dark {
    color: inherit !important;
}

.toast-container .toast.bg-success {
    background: var(--asg-btn-regresar) !important;
    border-color: var(--asg-shadow) !important;
    color: #ffffff !important;
}

.toast-container .toast.bg-danger {
    background: var(--asg-btn-canceled) !important;
    border-color: #b83c34 !important;
    color: #ffffff !important;
}

.toast-container .toast.bg-warning {
    background: var(--if-precaucion) !important;
    border-color: #ca9200 !important;
    color: var(--asg-shadow) !important;
}

.toast-container .toast.bg-info,
.toast-container .toast.bg-primary {
    background: var(--if-secundario) !important;
    border-color: var(--asg-shadow) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .toast-container .toast {
    border-color: var(--asg-dark-border) !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .55) !important;
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .toast-container .toast:hover {
    box-shadow: 0 6px 0 rgba(0, 0, 0, .55) !important;
}

:root[data-theme="dark"] .toast-container .toast:active {
    box-shadow: 0 2px 0 rgba(0, 0, 0, .55) !important;
}

:root[data-theme="dark"] .toast-container .toast.bg-success {
    background: var(--asg-btn-regresar) !important;
    border-color: #0b302c !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .toast-container .toast.bg-danger {
    background: var(--asg-btn-canceled) !important;
    border-color: #8f332d !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .toast-container .toast.bg-warning {
    background: var(--if-precaucion) !important;
    border-color: #8c6500 !important;
    color: #152427 !important;
}

:root[data-theme="dark"] .toast-container .toast.bg-info,
:root[data-theme="dark"] .toast-container .toast.bg-primary {
    background: var(--if-secundario) !important;
    border-color: #263f42 !important;
    color: #ffffff !important;
}

@media (max-width: 575.98px) {
    .toast-container.position-fixed {
        right: .5rem !important;
        bottom: calc(var(--asg-footer-h, 44px) + .6rem) !important;
        left: .5rem !important;
        width: auto;
        max-width: none;
    }

    .toast-container .toast {
        width: 100%;
    }
}

/* ==========================================================================
   Utilidades de alto y de tablas de detalle (opt-in por clase).
   Nada cambia salvo en las vistas que las declaren explícitamente.
   ========================================================================== */

/* site.css fija .card-body en 70vh. En vistas con cabecera alta (formularios de
   filtro, varias filas de botones) el card se pasa del alto disponible y el pie
   —con la paginación— termina debajo del .app-footer, que es position: fixed.
   Con .asg-fill-view el alto lo reparte el flex que el layout ya define para
   .card / .card-body / .card-footer, así que el panel ocupa exactamente el
   espacio libre: la tabla scrollea por dentro y el pie queda siempre visible. */
/* .main-content sólo tiene min-height: 100dvh y flex-shrink: 0, así que crece con
   su contenido: sin un alto DEFINIDO, los hijos flex pueden estirarse para llenar
   pero nunca encogerse para caber, y una tabla larga volvía a empujar la página
   por debajo del footer. En estas vistas el contenido nunca desborda —scrollea por
   dentro— así que fijar el alto al viewport es seguro y no afecta al header sticky. */
.main-content:has(.asg-fill-view) {
    height: 100dvh;
}

.content-wrapper:has(.asg-fill-view) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Holgura sobre el footer fijo: .35rem dejaba el borde inferior del panel
       pegado a la barra y la última fila se veía cortada. */
    padding-bottom: calc(var(--asg-footer-h, 44px) + .75rem);
}

/* ESLABÓN CLAVE: <main class="container-fluid"> es hijo flex de .content-wrapper
   y el layout no le da min-height. Un ítem flex en columna arranca con
   min-height: auto, o sea su mínimo es el alto de su contenido: por muy definido
   que esté el alto del padre, main NO puede encoger y toda la cadena desborda.
   Cada nivel entre el alto definido y el que scrollea necesita min-height: 0. */
.content-wrapper:has(.asg-fill-view) > .container-fluid {
    min-height: 0;
}

/* El último bloque de la vista no aporta margen extra: el panel cierra justo
   donde termina el área disponible, con su borde y su esquina redondeada. */
.asg-fill-view > :last-child {
    margin-bottom: 0 !important;
}

.asg-fill-view {
    min-height: 0;
}

.asg-fill-view > .card {
    min-height: 0;
}

.asg-fill-view > .card > .card-body {
    height: auto;
    min-height: 0;
}

/* Por debajo de 1366px la tabla se apila como tarjetas y ya no hay encabezado fijo:
   ahí el reparto de alto de fill-view no aplica y lo correcto es que la lista fluya
   con el scroll normal de la página. Fijar el alto al viewport dejaba la lista
   comprimida en un área diminuta con scroll interno (se veía una sola tarjeta). */
@media (max-width: 1365.98px) {
    .main-content:has(.asg-fill-view) {
        height: auto;
    }

    .asg-fill-view > .card > .card-body {
        overflow: visible;
    }
}

/* Tablas de detalle o configuración dentro de .asg-modern-view, que baja la vista
   a 13px: sin esto el contenido de la tabla se lee demasiado chico. Mismos
   tamaños que .kardex-stock-wrap en el detalle de Kardex. */
.asg-table--detail td,
.asg-table--detail th {
    font-size: .95rem;
}

.asg-table--detail thead th {
    font-size: .9rem;
    padding: .7rem 1rem;
}

/* Fila de totales al pie de una tabla (libro mayor, balance, estado de resultados). */
.asg-table__total > td,
.asg-table__total > th {
    background: #f1f7f6;
    border-top: 2px solid #c8dcd9;
    font-size: 1rem;
    /* Mismo margen lateral que las celdas del cuerpo (.asg-table tbody td): en
       <tfoot> esa regla no aplica y las cifras quedaban pegadas al borde. */
    padding: .75rem 1rem;
}

:root[data-theme="dark"] .asg-table__total > td,
:root[data-theme="dark"] .asg-table__total > th {
    background: rgba(95, 183, 175, .1);
    border-color: rgba(95, 183, 175, .3);
}

/* Etiqueta de la fila de totales: a la izquierda, como la fila "Saldo inicial",
   para que el ojo lea etiqueta → cifra bajo su columna. */
.asg-table__total > td.asg-table__total-label {
    text-align: left;
    font-weight: 600;
    color: var(--asg-text-muted, #5b6b6c);
    letter-spacing: .01em;
}

/* Segunda fila (saldo final): pegada a la anterior, sin doble borde, y con la
   cifra de cierre más grande para que sea lo primero que se lee. */
.asg-table__total + .asg-table__total > td {
    border-top: 1px solid #dbe8e6;
}

.asg-table__total--grand > td {
    background: #e6f1ef;
    border-bottom: 0;
}

.asg-table__total--grand > td.asg-table__total-label {
    color: var(--asg-shadow, #0b2e32);
    font-weight: 700;
}

.asg-table__total--grand > td.asg-money {
    font-size: 1.1rem;
}

:root[data-theme="dark"] .asg-table__total + .asg-table__total > td {
    border-top-color: rgba(95, 183, 175, .2);
}

:root[data-theme="dark"] .asg-table__total--grand > td {
    background: rgba(95, 183, 175, .16);
}

:root[data-theme="dark"] .asg-table__total--grand > td.asg-table__total-label {
    color: var(--asg-dark-text, #dceceb);
}

/* Estados financieros por secciones (Balance General): título de grupo,
   subtotal de grupo y cifras apenas más grandes que una lista normal. */
.asg-table tbody tr.asg-table__section > td {
    padding-top: 1.1rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--asg-shadow, #0b2e32);
    border-bottom: 1px solid var(--asg-border-light, #e5e9ed);
}

.asg-table tbody tr.asg-table__subtotal > td {
    background: #f6faf9;
    border-top: 1px solid #dbe8e6;
}

.asg-table tbody tr.asg-table__subtotal > td.asg-table__total-label {
    text-align: left;
    font-weight: 600;
    color: var(--asg-text-muted, #5b6b6c);
}

/* Resultado intermedio (Utilidad Bruta): etiqueta con el peso de un total,
   sin llegar al fondo de la fila de cierre. */
.asg-table tbody tr.asg-table__subtotal--result > td.asg-table__total-label {
    color: var(--asg-shadow, #0b2e32);
    font-weight: 700;
}

:root[data-theme="dark"] .asg-table tbody tr.asg-table__subtotal--result > td.asg-table__total-label {
    color: var(--asg-dark-text, #dceceb);
}

.asg-table.asg-table--balance td.asg-money,
.asg-table.asg-table--balance td.text-end {
    font-size: 1.02rem;
}

.asg-table.asg-table--balance .asg-table__total--grand > td.asg-money {
    font-size: 1.12rem;
}

/* Conciliación contable: diferencia fuera de tolerancia en rojo. */
.asg-table tbody td.asg-money.reconciliation-diff--open {
    color: #b42318;
}

:root[data-theme="dark"] .asg-table tbody td.asg-money.reconciliation-diff--open {
    color: #f19a93;
}

:root[data-theme="dark"] .asg-table tbody tr.asg-table__section > td {
    color: var(--asg-dark-text, #dceceb);
    border-bottom-color: rgba(95, 183, 175, .2);
}

:root[data-theme="dark"] .asg-table tbody tr.asg-table__subtotal > td {
    background: rgba(95, 183, 175, .06);
    border-top-color: rgba(95, 183, 175, .2);
}

/* Cabecera de página para vistas de detalle/configuración: mismos tokens que
   venían repitiéndose en cada <style> de vista (socios de negocio, kardex,
   asiento contable). Título + subtítulo a la izquierda, acciones a la derecha. */
.accounting-page-header {
    align-items: center;
    background: #fff;
    flex: 0 0 auto;
    border: 1px solid #e5e9ed;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(11, 46, 50, .05);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .85rem;
    padding: 1rem 1.1rem;
}

.accounting-page-title {
    color: #143238;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.accounting-page-subtitle {
    color: #6c7a86;
    font-size: .86rem;
    margin: .25rem 0 0;
    overflow-wrap: anywhere;
}

.accounting-page-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: flex-end;
}

:root[data-theme="dark"] .accounting-page-header {
    background: var(--asg-dark-surface);
    border-color: var(--asg-dark-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .38);
}

:root[data-theme="dark"] .accounting-page-title {
    color: var(--asg-dark-text);
}

:root[data-theme="dark"] .accounting-page-subtitle {
    color: var(--asg-dark-muted);
}

@media (max-width: 767.98px) {
    .accounting-page-header,
    .accounting-page-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .accounting-page-actions .btn-asg {
        width: 100%;
    }
}

/* Variante de .asg-fill-view para vistas que usan .asg-panel en vez de .card:
   el panel marcado crece hasta el footer y su cuerpo scrollea por dentro, en
   lugar de crecer indefinidamente y empujar la página bajo el footer fijo. */
/* Envoltorio intermedio (un <form>, un <section>...) entre .asg-fill-view y el
   panel que scrollea. Cada nivel de la cadena necesita ser columna flex y poder
   encoger; si falta uno, la cadena entera deja de funcionar. */
.asg-fill-view .asg-fill-chain {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* flex: 0 1 auto — el panel mide lo que mide su contenido, así que una tabla corta
   no deja un vacío blanco hasta el footer; y como puede encoger (min-height: 0)
   y está limitado al alto disponible, una tabla larga se queda dentro del área
   visible y scrollea por su cuerpo en vez de empujar la página. */
.asg-fill-view .asg-fill-panel {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

.asg-fill-view .asg-fill-panel > .asg-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    /* En ambos ejes: el scroll horizontal lo asume el cuerpo del panel, no el
       wrapper de la tabla (ver regla siguiente). */
    overflow: auto;
}

/* .asg-table-wrapper trae overflow-x: auto, y por spec eso vuelve auto también el
   overflow-y: el wrapper pasaba a ser el scrollport más cercano y el thead sticky
   se anclaba a él —que no scrollea— en vez de al cuerpo del panel. Devolviéndolo a
   visible, el scrollport es el .asg-panel__body y el encabezado sí queda fijo. */
.asg-fill-view .asg-fill-panel .asg-table-wrapper {
    overflow: visible;
}

/* Encabezado fijo mientras se desplaza el cuerpo del panel (mismo tratamiento que
   las listas dentro de .card-body). Debajo de 1366px la tabla se apila como cards
   y el thead se oculta, así que no aplica. */
@media (min-width: 1366px) {
    .asg-fill-view .asg-fill-panel .asg-table thead th {
        background: var(--if-white);
        box-shadow: 0 1px 0 var(--asg-border-light);
        position: sticky;
        top: 0;
        z-index: 4;
    }

    :root[data-theme="dark"] .asg-fill-view .asg-fill-panel .asg-table thead th {
        background: var(--asg-dark-surface);
    }
}

/* Los identificadores navegables se presentan como enlaces de texto, igual que
   la primera columna de Datos Maestros de Articulos. El selector se limita a
   <a>: los <span> que usan el modificador como insignia conservan su pildora. */
.asg-table a.asg-table__link--document {
    align-items: initial;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: block;
    font-size: inherit;
    gap: 0;
    max-width: 100%;
    padding: 0;
    transition: color .15s ease;
    white-space: normal;
}

.asg-table a.asg-table__link--document::after {
    content: none;
    display: none;
}

.asg-table a.asg-table__link--document:hover,
.asg-table a.asg-table__link--document:focus {
    background: transparent;
    border-color: transparent;
    color: var(--if-primary);
}

.asg-table a.asg-table__link--document:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--if-primary);
    outline-offset: 2px;
}

:root[data-theme="dark"] .asg-table a.asg-table__link--document,
:root[data-theme="dark"] .asg-table a.asg-table__link--document:hover,
:root[data-theme="dark"] .asg-table a.asg-table__link--document:focus {
    background: transparent;
    border-color: transparent;
}

/* Control de accesos: reparto de ancho de la tabla de bitacora. Usuario y
   User-Agent son los datos que se leen; el resto son etiquetas cortas que se
   comprimen. User-Agent no declara ancho a proposito, para que absorba el
   sobrante en vez de partirse en seis lineas. */
@media (min-width: 992px) {
    .access-control-view .asg-table {
        table-layout: fixed;
        width: 100%;
    }

    .access-control-view .ac-col-fecha { width: 9rem; }
    .access-control-view .ac-col-usuario { width: 21%; }
    .access-control-view .ac-col-ip { width: 5.5rem; }
    .access-control-view .ac-col-dispositivo,
    .access-control-view .ac-col-navegador,
    .access-control-view .ac-col-plataforma { width: 6rem; }
    .access-control-view .ac-col-estado { width: 4.5rem; }

    .access-control-view .asg-table td {
        overflow-wrap: anywhere;
    }
}

/* ==========================================================================
   Endurecimiento responsivo

   Ultima seccion del archivo a proposito: son reglas transversales que corrigen
   comportamientos por omision de Bootstrap y del motor —no estilos propios— y
   deben poder ganarle a cualquier regla de arriba. Cada vista sigue mandando
   sobre su apariencia; esto solo evita que el contenido imponga el ancho.

   El motivo de fondo: los desbordes horizontales no se ven en el modo
   responsivo de Chrome porque ese modo sigue siendo Blink. Un control que
   WebKit mide unos pixeles mas ancho basta para romper una fila que no puede
   encoger, y ahi el sintoma aparece solo en el dispositivo real. En vez de
   perseguir cada diferencia de motor, aqui se quita la rigidez que las
   convierte en desborde.
   ========================================================================== */


/* --- 1. Cadena de encogimiento -------------------------------------------
   Todo item flex o grid arranca con min-width:auto, que significa "nunca menos
   que mi contenido". Encadenados desde .main-content hasta las columnas, un
   solo campo ancho impide encoger a toda la rama y empuja la pagina. Devolver
   min-width:0 rompe esa propagacion: el contenido se adapta o scrollea dentro
   de su caja, pero ya no arrastra el layout. */
.main-content,
.content-wrapper,
.content-wrapper > .container-fluid,
.card,
.card-body,
.tab-content,
.tab-pane,
.asg-tabs-wrapper,
.row > * {
    min-width: 0;
}

/* --- 2. Controles de formulario ------------------------------------------
   width:100% no gana contra el ancho intrinseco de un control: sin min-width:0
   el input impone su propio minimo y revienta la columna que lo contiene. */
.asg-input,
.form-control,
.form-select,
.ts-wrapper,
input,
select,
textarea {
    min-width: 0;
    max-width: 100%;
}

/* WebKit dibuja date/time con un control nativo cuyo ancho intrinseco es mayor
   que el de Blink, y ademas centra el valor dentro del campo (por eso las
   fechas se ven centradas en iPad y alineadas a la izquierda en Chrome).
   Neutralizar la apariencia nativa los deja midiendo y alineando como
   cualquier otro campo; el selector de fecha del sistema se sigue abriendo. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
}

/* iOS hace zoom al enfocar un campo de menos de 16px y deja la pagina corrida.
   Antes lo tapaba el user-scalable=no del viewport, que Safari ignora desde
   iOS 10 y que ademas impedia hacer zoom a mano.
   Va con !important porque los estilos de cada vista bajan los campos a
   .9-.95rem con selectores mas especificos, y en movil la raiz mide 14px, asi
   que hasta 1rem queda corto. Solo aplica en pantalla tactil. */
@media (hover: none) and (pointer: coarse) {
    .asg-input,
    .form-control,
    .form-select,
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Doble toque sin zoom en toda la app. touch-action se combina con el de los
   ancestros, asi que basta en la raiz; el zoom con dos dedos sigue disponible
   y lo que pide touch-action: none (firmas, arrastres) lo conserva. */
html,
body {
    touch-action: manipulation;
}

/* --- 3. Contenido que no encoge solo -------------------------------------- */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

/* Cadenas sin espacios (correos, codigos de articulo, referencias) fijan un
   min-content igual a su largo completo y son la otra via tipica de desborde. */
.asg-field,
.asg-field > label,
.asg-table td,
.asg-table th,
.card-title,
.card-header {
    overflow-wrap: break-word;
}

/* --- 4. Tablas ------------------------------------------------------------
   Una tabla ancha debe scrollear dentro de su caja, nunca empujar la pagina.
   El wrapper ya trae overflow-x:auto; lo que faltaba era impedir que crezca
   mas que la columna que lo aloja. */
.asg-table-wrapper,
.table-responsive {
    max-width: 100%;
}

/* --- 5. Pestanias ---------------------------------------------------------
   .asg-tabs-nav es flex con botones en white-space:nowrap: en cuanto hay mas
   pestanias que ancho, la fila desborda. Que scrollee ella sola. */
.asg-tabs-nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.asg-tabs-nav::-webkit-scrollbar {
    display: none;
}

/* --- 6. Barras de acciones y encabezados ----------------------------------
   Los encabezados de detalle y las barras de botones se arman con flex en una
   sola linea. Permitirles envolver evita que el ultimo boton quede fuera de
   pantalla en anchos intermedios. */
.asg-form-actions-top,
.document-detail-actions-top,
.detail-header__actions,
.card-header {
    flex-wrap: wrap;
}

/* La barra superior nunca envuelve: si pasara a dos líneas cambiaría de alto
   mientras se scrollea y empujaría el contenido. En pantallas angostas ya se
   oculta el buscador y el título se recorta (header-left con overflow hidden). */
.top-header {
    flex-wrap: nowrap;
}

/* --- 7. Red de seguridad --------------------------------------------------
   Si algo se escapa pese a todo, la pagina scrollea en horizontal y el
   contenido sigue siendo alcanzable. No se usa overflow-x:hidden a proposito:
   escondería el problema recortando datos en vez de mostrarlos. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ==========================================================================
   Modal de conversión documento a documento
   (orden de compra → factura de proveedor, oferta de venta → factura de cliente)

   Está pensado para el documento largo. Con cien líneas el modal no puede
   crecer con las filas: el cuerpo scrollea por dentro (modal-dialog-scrollable),
   el encabezado de la tabla se queda pegado para no perder de vista qué
   columna es cuál, y en pantallas angostas cada renglón se apila como tarjeta
   para que el campo "Convertir" no quede escondido tras un scroll horizontal.
   ========================================================================== */

.conversion-modal-table {
    min-width: 690px;
    margin-bottom: 0;
}

.conversion-modal-table th {
    background: #f4f7f7;
    color: #40545a;
    font-size: 0.76rem;
    padding: 10px;
    white-space: nowrap;
}

.conversion-modal-table td {
    padding: 9px 10px;
    vertical-align: middle;
}

.conversion-quantity {
    width: 125px;
    text-align: right;
}

:root[data-theme="dark"] .conversion-modal-table th {
    background: var(--asg-dark-surface-2);
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .conversion-modal-table td {
    border-color: var(--asg-dark-border);
    color: var(--asg-dark-text);
}

.conversion-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px;
}

.conversion-toolbar__search {
    flex: 1 1 240px;
    min-width: 0;
}

.conversion-toolbar__search .asg-input {
    width: 100%;
}

.conversion-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.conversion-chip {
    border: 1px solid var(--asg-border-light, #d7e0e3);
    background: #f4f7f7;
    color: #40545a;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.conversion-chip:hover,
.conversion-chip:focus-visible {
    border-color: #789a99;
    background: #e8f1f0;
    color: #16383c;
}

.conversion-toolbar__count {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #5b7076;
}

/* El scroll vive aquí y no en .table-responsive: así el encabezado pegajoso
   tiene un contenedor de scroll propio contra el cual fijarse. */
.conversion-modal-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

.conversion-modal-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.conversion-empty {
    margin: 0;
    padding: 18px 4px;
    text-align: center;
    font-size: 0.85rem;
    color: #5b7076;
}

/* Debajo de la anchura en la que caben las seis columnas, el renglón se apila
   como tarjeta con la misma idiomática data-label del resto del sistema. */
@media (max-width: 767.98px) {

    .conversion-modal-scroll {
        overflow-x: visible;
    }

    .conversion-modal-table {
        min-width: 0;
    }

    .conversion-modal-table thead {
        display: none;
    }

    .conversion-modal-table,
    .conversion-modal-table tbody,
    .conversion-modal-table tr,
    .conversion-modal-table td {
        display: block;
        width: 100%;
    }

    .conversion-modal-table tbody tr {
        margin-bottom: 12px;
        border: 1px solid var(--asg-border-light, #d7e0e3);
        border-radius: 8px;
        overflow: hidden;
    }

    /* hidden sobre un <tr> que pasó a display:block necesita reafirmarse, o el
       filtro de búsqueda dejaría de esconder nada en el teléfono. */
    .conversion-modal-table tbody tr[hidden] {
        display: none;
    }

    .conversion-modal-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 12px;
        text-align: right;
        border: 0;
        border-bottom: 1px solid #eef2f5;
    }

    .conversion-modal-table tbody td:last-child {
        border-bottom: 0;
    }

    .conversion-modal-table tbody td::before {
        content: attr(data-label);
        color: var(--asg-shadow, #5b7076);
        font-size: 0.72rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        flex: 0 0 40%;
    }

    .conversion-quantity {
        width: 100%;
        max-width: 160px;
    }
}

:root[data-theme="dark"] .conversion-chip {
    border-color: var(--asg-dark-border);
    background: var(--asg-dark-surface-2);
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .conversion-chip:hover,
:root[data-theme="dark"] .conversion-chip:focus-visible {
    border-color: #6fe9d6;
    background: var(--asg-dark-surface);
    color: #6fe9d6;
}

:root[data-theme="dark"] .conversion-toolbar__count,
:root[data-theme="dark"] .conversion-empty {
    color: var(--asg-dark-muted);
}

:root[data-theme="dark"] .conversion-modal-table tbody td::before {
    color: var(--asg-dark-muted);
}

@media (max-width: 767.98px) {

    :root[data-theme="dark"] .conversion-modal-table tbody tr {
        border-color: var(--asg-dark-border);
    }

    :root[data-theme="dark"] .conversion-modal-table tbody td {
        border-bottom-color: var(--asg-dark-border);
    }
}

/* Buscador de los desplegables dentro de modales.

   El inicializador saca el desplegable al body (dropdownParent) para que no lo
   recorte el cuerpo del modal, que scrollea. TomSelect lo dibuja con z-index 10 y
   el modal de Bootstrap vive en 1055, así que sin esto el desplegable quedaría
   detrás del propio modal: visible en el DOM e invisible en pantalla. */
.ts-dropdown {
    z-index: 1060;
}

/* Selector de orden para una nueva entrega: explicación y conteos sobre la tabla. */
.asg-pick-order__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--asg-border-light, #e6e6e6);
}

.asg-pick-order__title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--asg-btn-submit, #10403b);
}

.asg-pick-order__text {
    max-width: 46rem;
    margin: 0;
    color: #6b7778;
    font-size: 0.88rem;
    line-height: 1.45;
}

.asg-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.asg-summary-stat {
    min-width: 6.5rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--asg-border-light, #e6e6e6);
    border-radius: 8px;
    background: #fafbfb;
}

.asg-summary-stat dt,
.asg-summary-stat__label {
    font-size: 0.72rem;
    font-weight: 500;
    color: #6b7778;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.asg-summary-stat dd,
.asg-summary-stat__value {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: #1f2d2e;
}

.asg-summary-stat--danger {
    border-color: #f1c4c4;
    background: #fdf3f3;
}

.asg-summary-stat--danger dd,
.asg-summary-stat--danger .asg-summary-stat__value {
    color: #b42318;
}

.asg-summary-stat--warning {
    border-color: #f3dcae;
    background: #fdf8ee;
}

.asg-summary-stat--warning dd,
.asg-summary-stat--warning .asg-summary-stat__value {
    color: #9a5b00;
}

.asg-pick-order__date--late {
    color: #b42318;
    font-weight: 600;
}

.asg-pick-order__progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 7rem;
}

.asg-pick-order__bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #e8eeee;
    overflow: hidden;
}

.asg-pick-order__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--asg-btn-submit, #10403b);
}

.asg-pick-order__progress small {
    min-width: 2.5rem;
    text-align: right;
    color: #6b7778;
}

.asg-pick-order__empty {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 38rem;
    margin: 0 auto;
    white-space: normal;
}

@media (max-width: 767.98px) {
    .asg-summary-stats {
        width: 100%;
    }

    .asg-summary-stat {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

:root[data-theme="dark"] .asg-pick-order__intro {
    border-top-color: var(--asg-dark-border, #27383c);
}

:root[data-theme="dark"] .asg-pick-order__title {
    color: #85d8d0;
}

:root[data-theme="dark"] .asg-pick-order__text,
:root[data-theme="dark"] .asg-summary-stat dt,
:root[data-theme="dark"] .asg-summary-stat__label,
:root[data-theme="dark"] .asg-pick-order__progress small {
    color: var(--asg-dark-muted, #9aa9ad);
}

:root[data-theme="dark"] .asg-summary-stat {
    border-color: var(--asg-dark-border, #27383c);
    background: var(--asg-dark-surface-2, #162225);
}

:root[data-theme="dark"] .asg-summary-stat dd,
:root[data-theme="dark"] .asg-summary-stat__value {
    color: #e6eeef;
}

:root[data-theme="dark"] .asg-summary-stat--danger dd,
:root[data-theme="dark"] .asg-summary-stat--danger .asg-summary-stat__value,
:root[data-theme="dark"] .asg-pick-order__date--late {
    color: #f19a93;
}

:root[data-theme="dark"] .asg-summary-stat--warning dd,
:root[data-theme="dark"] .asg-summary-stat--warning .asg-summary-stat__value {
    color: #f0c46b;
}

:root[data-theme="dark"] .asg-pick-order__bar {
    background: var(--asg-dark-border, #27383c);
}

:root[data-theme="dark"] .asg-pick-order__bar span {
    background: #85d8d0;
}

/* Conteo que además filtra la lista (Reservas de Inventario → Ofertas vencidas). */
.asg-summary-stat--link {
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.asg-summary-stat--link dt a {
    color: inherit;
    text-decoration: none;
}

.asg-summary-stat--link:hover,
.asg-summary-stat--link.is-active {
    border-color: var(--asg-btn-submit, #10403b);
    box-shadow: 0 0 0 1px var(--asg-btn-submit, #10403b);
}

:root[data-theme="dark"] .asg-summary-stat--link:hover,
:root[data-theme="dark"] .asg-summary-stat--link.is-active {
    border-color: #85d8d0;
    box-shadow: 0 0 0 1px #85d8d0;
}

/* Origen del precio bajo el selector de la línea (listas de precios de clientes):
   una sola línea corta; el detalle completo va en el tooltip. */
.customer-price-source {
    display: block;
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    font-size: .72rem;
    line-height: 1.2;
    color: #6b7778;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-price-source:empty {
    display: none;
}

:root[data-theme="dark"] .customer-price-source {
    color: var(--asg-dark-muted, #9aa9ad);
}

/* Importes de las líneas en vistas de detalle. site.js transforma los
   inputs bloqueados a texto para poder mostrar el separador de miles. */
#ifdevtabletv .asg-detail-number-display {
    font-variant-numeric: tabular-nums;
    text-align: right !important;
}