body.as-shell {
    min-height: 100vh;
    margin: 0;
    background: radial-gradient(circle at top, rgba(22, 163, 74, 0.10), transparent 26%), linear-gradient(180deg, #f6f8fb 0%, #eef3f8 100%);
    color: #172033;
    font-family: "DM Sans", sans-serif;
}

/* Aplicar cobro */
.collection-page.collection-workspace {
    display: grid;
    gap: 1rem;
}

.collection-heading {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.collection-back {
    align-items: center;
    background: #e7edf4;
    border-radius: 0.65rem;
    color: #28405f;
    display: inline-flex;
    font-size: 1.25rem;
    height: 2.65rem;
    justify-content: center;
    text-decoration: none;
    width: 2.65rem;
}

.collection-back:hover,
.collection-back:focus-visible {
    background: #d8e2ec;
    color: #10233e;
}

.collection-heading__copy h1 {
    color: #10233e;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
}

.collection-heading__copy p {
    color: #61728a;
    font-size: 0.82rem;
    margin: 0.15rem 0 0;
}

.collection-progress {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.collection-progress li {
    background: #e7edf4;
    border-radius: 999px;
    color: #58708d;
    font-size: 0.78rem;
    font-weight: 750;
    padding: 0.48rem 0.8rem;
    white-space: nowrap;
}

.collection-progress li.is-active {
    background: #dff7f1;
    color: #087b68;
}

.collection-context {
    align-items: end;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(430px, 1.7fr) minmax(260px, 1fr) minmax(150px, auto);
    padding: 1rem 1.1rem;
}

.collection-context__selectors {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(170px, 0.65fr) minmax(260px, 1.55fr);
}

.collection-context__label,
.collection-balance > span {
    color: #52647d;
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.collection-tax-data {
    align-self: center;
    min-width: 0;
}

.collection-tax-data strong,
.collection-tax-data > span:last-child {
    color: #17304f;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-tax-data strong {
    font-size: 0.85rem;
}

.collection-tax-data > span:last-child {
    color: #63758e;
    font-size: 0.75rem;
    margin-top: 0.18rem;
}

.collection-balance {
    align-self: center;
    text-align: right;
}

.collection-balance strong {
    color: #071a35;
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 1.35rem;
    font-weight: 850;
    letter-spacing: -0.025em;
}

.collection-balance small {
    background: #e5f6f2;
    border-radius: 999px;
    color: #087b68;
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 750;
    gap: 0.35rem;
    margin-top: 0.25rem;
    padding: 0.3rem 0.55rem;
}

.collection-balance small i {
    color: #24b99a;
    font-size: 0.45rem;
    margin-top: 0.3rem;
}

.collection-layout {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
}

.collection-accounts {
    overflow: hidden;
    padding: 0;
}

.collection-workspace .collection-accounts .collection-accounts__head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 0;
    padding: 0.95rem 1rem;
}

.collection-title-line {
    align-items: center;
    display: flex;
    gap: 0.65rem;
}

.collection-count {
    align-items: center;
    background: #eaf0f6;
    border-radius: 999px;
    color: #405a77;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    height: 1.55rem;
    justify-content: center;
    min-width: 1.55rem;
    padding: 0 0.35rem;
}

.collection-document-link {
    text-align: left;
}

.collection-accounts__footer {
    align-items: center;
    border-top: 1px solid #e2e9f1;
    color: #60738c;
    display: flex;
    font-size: 0.74rem;
    justify-content: space-between;
    padding: 0.75rem 1rem;
}

.collection-accounts__footer strong {
    color: #526782;
    font-weight: 750;
}

.collection-payment {
    background: #ffffff;
    border: 1px solid #d8e2ec;
    border-radius: 0.7rem;
    box-shadow: 0 14px 32px rgba(16, 35, 62, 0.1);
    overflow: hidden;
    position: sticky;
    top: 1rem;
}

.collection-payment__head {
    background: #17385f;
    color: #ffffff;
    padding: 1rem;
}

.collection-payment__head h2 {
    color: inherit;
    font-family: "Manrope", sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.collection-payment__head p {
    color: #d7e2ef;
    font-size: 0.75rem;
    margin: 0.2rem 0 0;
}

.collection-payment__body {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.collection-exchange {
    align-items: end;
    display: none;
    gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.collection-exchange.is-visible {
    display: grid;
}

.collection-conversion {
    background: #f2f6fa;
    border-radius: 0.45rem;
    min-height: 2.65rem;
    padding: 0.45rem 0.65rem;
}

.collection-conversion span,
.collection-conversion strong {
    color: #61738a;
    display: block;
    font-size: 0.68rem;
}

.collection-conversion strong {
    color: #17304f;
    font-size: 0.78rem;
    margin-top: 0.08rem;
}

.collection-receipt-options,
.collection-complement {
    display: grid;
    gap: 0.55rem;
}

.collection-complement {
    background: #f7f9fc;
    border: 1px solid #e3eaf2;
    border-radius: 0.55rem;
    padding: 0.75rem;
}

.collection-payment__actions {
    display: grid;
    gap: 0.7rem;
}

.collection-payment__actions .as-action {
    justify-content: center;
}

@media (max-width: 1199.98px) {
    .collection-context {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
    }

    .collection-balance {
        grid-column: 2;
        grid-row: 1;
    }

    .collection-tax-data {
        grid-column: 1 / -1;
    }

    .collection-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 330px);
    }
}

@media (max-width: 991.98px) {
    .collection-layout {
        grid-template-columns: 1fr;
    }

    .collection-payment {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .collection-heading {
        align-items: start;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .collection-progress {
        grid-column: 1 / -1;
        padding-left: 3.4rem;
    }

    .collection-context,
    .collection-context__selectors {
        grid-template-columns: 1fr;
    }

    .collection-tax-data,
    .collection-balance {
        grid-column: auto;
        grid-row: auto;
        text-align: left;
    }

    .collection-workspace .collection-accounts .collection-accounts__head,
    .collection-accounts__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .collection-accounts__head .as-action {
        justify-content: center;
        width: 100%;
    }
}

/* Dashboard */
[data-ng-cloak] {
    display: none !important;
}

.dashboard-view {
    display: grid;
    gap: 1.5rem;
}

.dashboard-hero {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.dashboard-hero h1 {
    color: #0f172a;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.45rem, 2.5vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    margin: 0;
}

.dashboard-hero p {
    color: #64748b;
    margin: 0.4rem 0 0;
}

.dashboard-hero__total {
    color: #0f766e;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    white-space: nowrap;
}

.dashboard-metrics {
    background: #101a2d;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0.55rem;
    box-shadow: 0 14px 32px rgba(9, 17, 31, 0.16);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}

.dashboard-metrics--sales {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-metric {
    align-items: flex-start;
    color: #ffffff;
    display: flex;
    gap: 0.85rem;
    min-width: 0;
    padding: 1.3rem 1.2rem;
    position: relative;
}

.dashboard-metric + .dashboard-metric::before {
    background: rgba(255, 255, 255, 0.11);
    content: "";
    inset: 1.15rem auto 1.15rem 0;
    position: absolute;
    width: 1px;
}

.dashboard-metric__icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.45rem;
    color: #8bc5ff;
    display: inline-flex;
    flex: 0 0 2.45rem;
    height: 2.45rem;
    justify-content: center;
}

.dashboard-metric--positive .dashboard-metric__icon {
    color: #5ee0aa;
}

.dashboard-metric--warning .dashboard-metric__icon {
    color: #f6c76d;
}

.dashboard-metric__label,
.dashboard-metric__note {
    display: block;
}

.dashboard-metric__label {
    color: #bec9d9;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}

.dashboard-metric__value {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.2;
    margin: 0.25rem 0 0.35rem;
    overflow-wrap: anywhere;
}

.dashboard-metric__value--name {
    font-size: clamp(1rem, 1.55vw, 1.3rem);
    line-height: 1.3;
}

.dashboard-metric__note {
    color: #93a1b5;
    font-size: 0.72rem;
}

.dashboard-metric__note b {
    color: #dbe5f2;
    font-weight: 700;
}

.dashboard-currency-warning {
    align-items: center;
    background: #fff8e8;
    border: 1px solid #f0d48c;
    border-radius: 0.5rem;
    color: #73510d;
    display: flex;
    font-size: 0.82rem;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
}

.dashboard-currency-warning .fa {
    color: #b7790b;
}

.dashboard-overview,
.dashboard-layout {
    align-items: start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

.dashboard-overview .dashboard-switcher {
    align-self: stretch;
}

.dashboard-sidebar,
.dashboard-content {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

.dashboard-switcher {
    background: #e7edf5;
    border-radius: 0.5rem;
    padding: 0.45rem;
}

.dashboard-switcher__label {
    color: #526076;
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem 0.45rem;
}

.dashboard-switcher__links {
    display: grid;
    gap: 0.25rem;
}

.dashboard-switcher .nav-link {
    border-radius: 0.38rem;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.55rem 0.65rem;
}

.dashboard-switcher .nav-link:hover,
.dashboard-switcher .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.72);
    color: #0f766e;
}

.dashboard-switcher .nav-link.active {
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.09);
    color: #0f766e;
}

.dashboard-filters {
    padding: 1rem;
}

.dashboard-card-heading {
    align-items: flex-start;
    border-bottom: 1px solid #e7edf3;
    display: flex;
    gap: 0.7rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
}

.dashboard-card-heading__icon {
    align-items: center;
    background: #e4f5f0;
    border-radius: 0.4rem;
    color: #087d68;
    display: inline-flex;
    flex: 0 0 2rem;
    height: 2rem;
    justify-content: center;
}

.dashboard-card-heading h2,
.dashboard-chart-card__header h2 {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
}

.dashboard-card-heading p,
.dashboard-chart-card__header p {
    color: #718096;
    font-size: 0.76rem;
    line-height: 1.4;
    margin: 0.2rem 0 0;
}

.dashboard-filter-fields {
    display: grid;
    gap: 0.9rem;
}

.dashboard-field label {
    color: #415068;
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.38rem;
}

.dashboard-field .form-select,
.dashboard-field .form-control,
.dashboard-field .dx-texteditor {
    border-color: #d7e1eb;
    border-radius: 0.4rem;
    box-shadow: none;
    font-size: 0.82rem;
    min-height: 2.55rem;
}

.dashboard-field .form-select:focus,
.dashboard-field .form-control:focus,
.dashboard-field .dx-state-focused {
    border-color: #15a887;
    box-shadow: 0 0 0 0.18rem rgba(21, 168, 135, 0.13);
}

.dashboard-autocomplete {
    position: relative;
}

.dashboard-autocomplete__control {
    position: relative;
}

.dashboard-autocomplete__control .form-control {
    padding-right: 2.25rem;
}

.dashboard-autocomplete__clear {
    align-items: center;
    background: transparent;
    border: 0;
    color: #718096;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
}

.dashboard-autocomplete__clear:hover,
.dashboard-autocomplete__clear:focus-visible {
    color: #0f766e;
}

.dashboard-autocomplete__options {
    background: #ffffff;
    border: 1px solid #cfd9e5;
    border-radius: 0.42rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    left: 0;
    margin-top: 0.3rem;
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.3rem;
    position: absolute;
    right: 0;
    z-index: 1060;
}

.dashboard-autocomplete__option {
    background: transparent;
    border: 0;
    border-radius: 0.3rem;
    color: #26354c;
    display: block;
    font-size: 0.8rem;
    line-height: 1.35;
    padding: 0.55rem 0.65rem;
    text-align: left;
    width: 100%;
}

.dashboard-autocomplete__option:hover,
.dashboard-autocomplete__option:focus-visible,
.dashboard-autocomplete__option.is-active {
    background: #e9f6f2;
    color: #08745f;
    outline: 0;
}

.dashboard-autocomplete__option--all {
    border-bottom: 1px solid #e7edf3;
    border-radius: 0.3rem 0.3rem 0 0;
    color: #526076;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.dashboard-autocomplete__empty {
    color: #718096;
    font-size: 0.78rem;
    margin: 0;
    padding: 0.7rem 0.65rem;
}

.dashboard-filter-action {
    margin-top: 1rem;
    width: 100%;
}

.dashboard-chart-card {
    overflow: hidden;
}

.dashboard-chart-card__header {
    align-items: flex-start;
    background: #f8fafc;
    border-bottom: 1px solid #e6ebf1;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: 4.2rem;
    padding: 1rem 1.15rem;
}

.dashboard-chart-total {
    color: #0f766e;
    font-family: "Manrope", sans-serif;
    font-size: 1.15rem;
    text-align: right;
    white-space: nowrap;
}

.dashboard-chart-option {
    margin-top: 0.35rem;
}

.dashboard-chart-option .dx-checkbox-text {
    color: #64748b;
    font-family: "DM Sans", sans-serif;
    font-size: 0.76rem;
}

.dashboard-chart {
    min-height: 320px;
    padding: 0.75rem;
}

.dashboard-chart--pie {
    min-height: 390px;
}

.dashboard-chart--customers {
    min-height: 440px;
    padding: 1rem 1.25rem 1.25rem;
}

.dashboard-grid {
    border-top: 1px solid #e6ebf1;
    padding: 1rem;
}

@media (max-width: 1199.98px) {
    .dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-metric:nth-child(3)::before {
        display: none;
    }

    .dashboard-metric:nth-child(n+3) {
        border-top: 1px solid rgba(255, 255, 255, 0.11);
    }
}

@media (max-width: 991.98px) {
    .dashboard-overview,
    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        grid-template-columns: 1fr;
    }

    .dashboard-overview .dashboard-switcher__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-metrics,
    .dashboard-sidebar {
        grid-template-columns: 1fr;
    }

    .dashboard-metric + .dashboard-metric::before {
        display: none;
    }

    .dashboard-metric:nth-child(n+2) {
        border-top: 1px solid rgba(255, 255, 255, 0.11);
    }

    .dashboard-filter-fields {
        grid-template-columns: 1fr;
    }

    .dashboard-chart-card__header {
        flex-direction: column;
    }

    .dashboard-chart-total {
        text-align: left;
    }

    .dashboard-chart {
        min-height: 280px;
        padding: 0.35rem;
    }
}

.as-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(135deg, #09111f 0%, #101a2d 55%, #172744 100%);
    box-shadow: 0 12px 30px rgba(9, 17, 31, 0.22);
}

.as-topbar__inner {
    max-width: 1480px;
    padding: 1rem 1.5rem;
}

.as-brand__logo {
    height: 40px;
    width: auto;
}

html,
body.as-shell {
    margin: 0 !important;
    padding: 0 !important;
}

.as-topbar,
.as-topbar .navbar {
    margin: 0 !important;
}

.as-nav {
    gap: 0.35rem;
    margin-left: 1.75rem;
}

.as-nav .nav-link {
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.7rem 0.85rem 0.58rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.as-nav .nav-link:hover,
.as-nav .nav-link:focus {
    color: #ffffff;
    background: transparent;
}

.as-nav .nav-link.active {
    color: #ffffff;
    border-bottom-color: #35d997;
}

.as-user {
    align-items: center;
    color: #ffffff;
    display: flex;
    gap: 0.9rem;
}

.as-user__icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.as-user__name,
.as-user__logout {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}

.as-user__name:hover,
.as-user__logout:hover {
    color: #9ff0c8;
}

.as-main {
    padding: 2rem 0 2.5rem;
}

.as-page {
    max-width: 1480px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.as-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 0.5rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

/* Let popup layers participate in the page stacking order. A backdrop filter
   would trap them in the card's own stacking context. */
.as-popup-host {
    position: relative;
    overflow: visible;
    backdrop-filter: none;
    z-index: auto;
}

.cl-page {
    display: grid;
    gap: 1.5rem;
}

.cl-hero {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.cl-hero h1,
.cl-page-title {
    color: #0f172a;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.cl-hero h1 {
    margin: 0;
}

.cl-hero p {
    color: #5a667d;
    font-size: 1rem;
    margin: 0.45rem 0 0;
    max-width: 780px;
}

.cl-actions {
    display: flex;
    gap: 0.75rem;
}

.as-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.as-actions--end {
    margin-left: auto;
}

.as-action {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.38rem;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.45rem 0.72rem;
    text-decoration: none;
}

.as-action--primary {
    background: linear-gradient(135deg, #1675d2 0%, #116ac7 100%);
    box-shadow: 0 5px 12px rgba(17, 106, 199, 0.18);
    color: #ffffff;
}

.as-action--primary:hover,
.as-action--primary:focus {
    background: #0d56a0;
    color: #ffffff;
}

.as-action--edit {
    background: #f4f8fe;
    border-color: #c6daf4;
    color: #116ac7;
}

.as-action--edit:hover,
.as-action--edit:focus {
    background: #e8f1fc;
    border-color: #8bb9eb;
    color: #0d56a0;
}

.as-action--create {
    background: linear-gradient(135deg, #11b67b 0%, #0d9b69 100%);
    box-shadow: 0 5px 12px rgba(13, 155, 105, 0.16);
    color: #ffffff;
}

.as-action--create:hover,
.as-action--create:focus {
    background: #087d57;
    color: #ffffff;
}

.as-action--secondary {
    background: #ffffff;
    border-color: #d7e1eb;
    color: #334155;
}

.as-action--secondary:hover,
.as-action--secondary:focus {
    background: #edf7f4;
    border-color: #94d7c6;
    color: #08745f;
}

.as-action--danger {
    background: #ffffff;
    border-color: #dce5ef;
    color: #7a8799;
}

.as-action--danger:hover,
.as-action--danger:focus {
    background: #fff4f4;
    border-color: #f2b9b9;
    color: #bd3030;
}

.as-action--compact {
    font-size: 0.78rem;
    min-height: 2.1rem;
    padding: 0.4rem 0.62rem;
}

.as-action--icon {
    min-width: 2.1rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

.cl-toolbar,
.cl-grid-card {
    padding: 1.35rem;
}

.cl-toolbar {
    overflow: visible;
    position: relative;
    z-index: 20;
}

.cl-grid-card {
    position: relative;
    overflow: visible;
    backdrop-filter: none;
    z-index: auto;
}

.cl-toolbar__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mail-template-filters {
    grid-template-columns: minmax(260px, 420px);
}

.cl-field label {
    color: #334155;
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.cl-field input:not([type="radio"]):not([type="checkbox"]):not([class*="dxeEditArea"]),
.cl-field select {
    background: #f9fbfd;
    border: 1px solid #d8e2ee;
    border-radius: 0.5rem;
    box-shadow: none;
    color: #0f172a;
    min-height: 48px;
    padding: 0.7rem 0.95rem;
    width: 100%;
}

.cl-field input:not([type="radio"]):not([type="checkbox"]):not([class*="dxeEditArea"]):focus,
.cl-field select:focus {
    border-color: #20b47b;
    box-shadow: 0 0 0 0.25rem rgba(32, 180, 123, 0.14);
    outline: 0;
}

.cl-toolbar .input-group {
    flex-wrap: nowrap;
}

.cl-toolbar .input-group > .form-control {
    min-width: 0;
    width: 1%;
}

.cl-toolbar .input-group .btn {
    align-items: center;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    padding: 0;
    width: 42px;
}

.cl-toolbar .dropdown-menu {
    z-index: 1055;
}

.cl-field--actions {
    align-self: end;
    display: flex;
    justify-content: flex-end;
}

.cl-field--actions .btn {
    border-radius: 0.5rem;
    min-height: 48px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.cl-grid-card__head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.cl-grid-card__title {
    margin: 0;
}

.cl-grid-card__title h2 {
    font-family: "Manrope", sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0;
}

.cl-grid-card__title p {
    color: #64748b;
    margin: 0.3rem 0 0;
}

.cl-badge {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 0.35rem;
    color: #0f9f63;
    display: inline-flex;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.55rem 0.9rem;
}

/* DevExpress popup edit forms can extend beyond a short or empty grid. */
.cl-grid-shell {
    overflow: visible;
    position: relative;
}

.cl-grid-shell.is-loading::after {
    background: rgba(255, 255, 255, 0.66);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 5;
}

.cl-grid-shell.is-loading::before {
    animation: cl-spin 0.8s linear infinite;
    border: 2px solid #d7e3dc;
    border-radius: 50%;
    border-top-color: #0d9b69;
    content: "";
    height: 26px;
    left: calc(50% - 13px);
    position: absolute;
    top: calc(50% - 13px);
    width: 26px;
    z-index: 6;
}

@keyframes cl-spin {
    to {
        transform: rotate(360deg);
    }
}

.cl-grid {
    width: 100%;
}

.cl-label,
.cl-label:visited,
.cl-label:hover,
.cl-label:focus {
    color: #172033 !important;
    font-weight: 700;
    text-decoration: none;
}

.company-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.company-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.company-card__visual {
    aspect-ratio: 22 / 13;
    align-items: center;
    background: #f4f7fa;
    border-bottom: 1px solid #e3e9f1;
    display: flex;
    justify-content: center;
    max-height: 300px;
    overflow: hidden;
    padding: 1.25rem;
    width: 100%;
}

.company-card__logo-link {
    display: block;
    height: 100%;
    width: 100%;
}

.company-card__logo-link:focus-visible {
    outline: 3px solid rgba(17, 106, 199, 0.45);
    outline-offset: -3px;
}

.company-card__logo-link img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.company-logo {
    display: block;
    height: auto;
    max-height: 11rem;
    max-width: 100%;
    object-fit: contain;
}

.company-card__body {
    flex: 1;
    min-width: 0;
    padding: 1.2rem;
}

.company-card__heading {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.company-card__title,
.company-card__title:visited,
.company-card__title:hover,
.company-card__title:focus {
    color: #172033 !important;
    font-family: "Manrope", sans-serif;
    font-size: 1.05rem !important;
    font-weight: 800;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.company-card__details {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.company-card__details div {
    min-width: 0;
}

.company-card__details dt {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 750;
    margin-bottom: 0.15rem;
}

.company-card__details dd {
    color: #334155;
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.company-logo-shell {
    align-items: center;
    background: #f7f9fc;
    border: 1px solid #e3e9f1;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    min-height: 11rem;
    padding: 1rem;
}

.company-detail-page .panel-heading + .panel-body > .row {
    --bs-gutter-y: 1rem;
}

.cl-grid-actions {
    white-space: nowrap;
}

.client-page,
.import-page {
    display: grid;
    gap: 1.5rem;
}

.client-page > .row {
    --bs-gutter-y: 1.5rem;
}

.cl-page-title {
    margin: 0 0 1.25rem;
}

.client-page .panel {
    background: #fff;
    border: 1px solid #e3e9f1;
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px rgba(23, 32, 51, 0.045);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.client-page .panel-heading {
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #e3e9f1;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-height: 3.85rem;
    padding: 0.85rem 1.1rem;
}

.client-page .panel-heading .title-panel {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 0.95rem;
    font-weight: 750;
    margin: 0;
}

.as-form-actions,
.client-popup-actions {
    align-items: center;
    border-top: 1px solid #e8edf3;
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
    margin-top: 1.1rem;
    padding-top: 1rem;
}

.as-edit-form,
.client-edit-form {
    padding: 1.25rem;
}

.as-edit-form .as-form-field label,
.client-edit-form .client-edit-field label {
    color: #415068;
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    margin: 0 0 0.4rem;
}

.as-edit-form .as-form-check,
.client-edit-form .client-edit-check {
    align-items: flex-end;
    display: flex;
    min-height: 4rem;
}

.as-edit-form .dxeTextBox,
.as-edit-form .dxeButtonEdit,
.client-edit-form .dxeTextBox,
.client-edit-form .dxeButtonEdit {
    border-color: #d7e1eb;
    border-radius: 0.4rem;
    box-shadow: none;
}

.as-edit-form .dxeEditArea,
.client-edit-form .dxeEditArea {
    min-height: 2.35rem;
    padding: 0.45rem 0.65rem;
}

.client-page .client-comments {
    align-self: start;
    margin-top: 3.25rem;
}

.client-comments .panel-body {
    padding: 1rem;
}

.client-comment-compose .dxeMemo {
    border-color: #d7e1eb;
    border-radius: 0.4rem;
    box-shadow: none;
}

.client-comment-compose .dxeMemo textarea {
    padding: 0.65rem;
}

.client-comment-compose .as-actions {
    margin-top: 0.7rem;
}

.client-comment-list {
    border-top: 1px solid #e8edf3;
    margin-top: 1rem;
    padding-top: 0.4rem;
}

.client-comment {
    border-bottom: 1px solid #edf1f5;
    padding: 0.8rem 0;
}

.client-comment:last-child {
    border-bottom: 0;
}

.client-comment__meta {
    align-items: center;
    color: #334155;
    display: flex;
    font-size: 0.78rem;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.client-comment__meta time {
    color: #7a8799;
    font-size: 0.72rem;
}

.client-comment__body {
    color: #46566e;
    font-size: 0.82rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.client-page .panel-heading .btn,
.client-page .panel-body .btn {
    align-items: center;
    border: 1px solid #d7e1eb;
    border-radius: 0.4rem;
    color: #334155;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.35rem;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
}

.client-page .panel-heading .btn:hover,
.client-page .panel-body .btn:hover {
    background: #edf7f4;
    border-color: #94d7c6;
    color: #08745f;
}

.client-page .panel-body {
    padding: 1.1rem;
}

.client-page .panel-body .insert-space {
    margin-bottom: 0.9rem;
}

.client-page .panel-body label,
.import-fields label {
    color: #415068;
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    margin: 0.4rem 0 0.4rem;
}

    .client-page .panel-body .Data-Info {
        color: #172033;
        font-weight: 650;
        min-height: 2rem;
        padding-top: 0.3rem;
        background-color: aliceblue
    }

.recurring-detail-page .label_format {
    display: inline-block;
    font-weight: 700;
    margin-bottom: 0.35rem;
    max-width: 100%;
}

.recurring-detail-page .panel-heading .panel-title {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 0.95rem;
    font-weight: 750;
    margin: 0;
}

.recurring-detail-form > .form-group {
    margin: 0;
}

.recurring-detail-form .dxeTextBox,
.recurring-detail-form .dxeButtonEdit {
    border-color: #d7e1eb;
    border-radius: 0.4rem;
    box-shadow: none;
}

.recurring-detail-form .dxeEditArea {
    min-height: 2.35rem;
    padding: 0.45rem 0.65rem;
}

.recurring-detail-value--number {
    text-align: right;
}

.recurring-detail-alerts:empty {
    display: none;
}

.recurring-detail-alerts .alert {
    margin-bottom: 1rem;
}

.recurring-detail-tabs {
    overflow: visible;
    padding: 0.4rem;
}

.recurring-grid-head {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 0.75rem;
}

.recurring-grid-head h3 {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.recurring-grid-head p {
    color: #64748b;
    font-size: 0.82rem;
    margin: 0.25rem 0 0;
}

.recurring-grid-actions {
    flex-wrap: nowrap;
    justify-content: center;
}

.recurring-detail-date-field {
    position: static;
}

.recurring-detail-summary {
    margin-top: 0.75rem;
}

.import-card {
    padding: clamp(1.1rem, 2.5vw, 1.75rem);
}

.import-card__heading {
    align-items: flex-start;
    border-bottom: 1px solid #e8edf3;
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.1rem;
}

.import-card__icon {
    align-items: center;
    background: #e1f6ef;
    border-radius: 0.5rem;
    color: #07816a;
    display: inline-flex;
    flex: 0 0 2.35rem;
    height: 2.35rem;
    justify-content: center;
}

.import-card__heading h2 {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    font-weight: 750;
    margin: 0 0 0.2rem;
}

.import-card__heading p,
.import-fields .help-block {
    color: #667085;
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}

.import-fields .form-control {
    border-color: #d7e1eb;
    border-radius: 0.4rem;
    color: #243249;
    min-height: 2.55rem;
}

.import-fields .form-control:focus {
    border-color: #15ad8d;
    box-shadow: 0 0 0 0.18rem rgba(21, 173, 141, 0.14);
}

.import-file {
    border: 1px dashed #aebdcc;
    border-radius: 0.4rem;
    padding: 0.25rem;
}

.import-file .form-control {
    border: 0;
    box-shadow: none;
}

.import-actions {
    border-top: 1px solid #e8edf3;
    display: flex;
    justify-content: flex-end;
    margin-top: 0.7rem;
    padding-top: 1.15rem;
}

.fr-popup-intro h3 {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.fr-popup-intro p {
    color: #64748b;
    font-size: 0.86rem;
    margin: 0.3rem 0 0;
}

.fr-status {
    align-items: center;
    background: #f9fbfd;
    border: 1px solid #d8e2ee;
    border-radius: 0.5rem;
    display: flex;
    min-height: 48px;
    padding: 0.45rem 0.75rem;
}

.fr-status table {
    width: 100%;
}

.fr-grid-card {
    min-width: 0;
}

.fr-grid .as-actions {
    flex-wrap: nowrap;
    justify-content: center;
}

.fr-popup-content {
    padding: 0.35rem 0.2rem 0.15rem;
}

.fr-popup-intro {
    align-items: flex-start;
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.25rem;
}

.fr-popup-icon {
    align-items: center;
    background: #eaf8f3;
    border-radius: 50%;
    color: #07816a;
    display: inline-flex;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    justify-content: center;
}

.fr-contract-options {
    display: grid;
    gap: 0.75rem;
}

.fr-contract-option {
    background: #f9fbfd;
    border: 1px solid #dfe7ef;
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
}

.fr-contract-option > span {
    color: #64748b;
    display: block;
    font-size: 0.82rem;
    margin: 0.35rem 0 0 1.55rem;
}

.fr-popup-content .as-form-actions,
.fr-popup-content .client-popup-actions {
    border-top: 1px solid #e8edf3;
    margin-top: 1.2rem;
    padding-top: 1rem;
}

.billing-page {
    gap: 1.35rem;
}

.billing-nav {
    align-items: center;
    align-self: start;
    background: #eef3f8;
    border: 1px solid #dce5ef;
    border-radius: 0.55rem;
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
}

.billing-nav__item {
    align-items: center;
    border-radius: 0.38rem;
    color: #526076;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 0.45rem;
    min-height: 2.3rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.billing-nav__item:hover,
.billing-nav__item:focus-visible {
    background: rgba(255, 255, 255, 0.7);
    color: #116ac7;
    outline: 0;
}

.billing-nav__item.is-active {
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.09);
    color: #0f172a;
}

.billing-nav__item.is-active i {
    color: #0d9b69;
}

.billing-hero {
    align-items: center;
}

.billing-hero__actions {
    flex: 0 0 auto;
}

.billing-section-heading {
    border-bottom: 1px solid #e8edf3;
    margin: -0.1rem 0 1.05rem;
    padding-bottom: 0.85rem;
}

.billing-section-heading h2 {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.billing-section-heading p {
    color: #64748b;
    font-size: 0.82rem;
    margin: 0.25rem 0 0;
}

.billing-field .dxeButtonEdit,
.billing-field .dxeTextBox,
.billing-popup .dxeButtonEdit,
.billing-popup .dxeTextBox {
    border-color: #d7e1eb;
    border-radius: 0.4rem;
    box-shadow: none;
    min-height: 2.65rem;
}

.billing-field input[class*="dxeEditArea"],
.billing-popup input[class*="dxeEditArea"] {
    box-sizing: border-box;
    height: 2.5rem;
    min-height: 0;
    padding: 0.5rem 0.65rem;
}

.billing-field .dxeFocused,
.billing-popup .dxeFocused {
    border-color: #15ad8d;
    box-shadow: 0 0 0 0.18rem rgba(21, 173, 141, 0.14);
}

.billing-search {
    min-height: 2.65rem;
    width: 100%;
}

.billing-grid-card {
    min-width: 0;
}

.billing-concepts-card {
    min-width: 0;
    overflow: visible;
    padding: 0;
}

.billing-concepts-head {
    align-items: center;
    border-bottom: 1px solid #e3e9f1;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.1rem;
}

.billing-concepts-head .cl-grid-card__title h2 {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    margin: 0;
}

.billing-concepts-head .cl-grid-card__title p {
    color: #718096;
    font-size: 0.76rem;
    margin: 0.2rem 0 0;
}

.billing-concepts-table {
    margin: 0;
    min-width: 0;
    overflow-x: auto;
}

.billing-concepts-grid {
    min-width: 760px;
}

div[id^="gridconceptos_DXPEForm_PW-"] {
    max-width: calc(100vw - 2rem) !important;
    min-width: 0 !important;
    width: min(1040px, calc(100vw - 2rem)) !important;
}

div[id^="gridconceptos_DXPEForm_PW-"] .dxpc-content,
div[id^="gridconceptos_DXPEForm_PW-"] [class*="dxpc-content"] {
    padding: 0 !important;
}

.billing-concept-editor {
    background: #ffffff;
    max-height: calc(100vh - 3rem);
    overflow-x: hidden;
    overflow-y: auto;
}

.billing-concept-editor__head {
    align-items: flex-start;
    background: #f7f9fc;
    border-bottom: 1px solid #e3e9f1;
    display: flex;
    gap: 0.8rem;
    padding: 1rem 1.25rem;
}

.billing-concept-editor__icon {
    align-items: center;
    background: #e4f5f0;
    border-radius: 0.42rem;
    color: #087d68;
    display: inline-flex;
    flex: 0 0 2.25rem;
    height: 2.25rem;
    justify-content: center;
}

.billing-concept-editor__head h3 {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.billing-concept-editor__head p {
    color: #64748b;
    font-size: 0.78rem;
    margin: 0.25rem 0 0;
}

.billing-concept-form {
    padding: 0.9rem 1.25rem 1.1rem;
}

.billing-concept-form > .row + .row {
    margin-top: 0.05rem;
}

.billing-concept-form > .row {
    --bs-gutter-y: 0.65rem;
}

.billing-concept-retentions {
    border-bottom: 1px solid #e8edf3;
    border-top: 1px solid #e8edf3;
    margin-bottom: 0.2rem;
    margin-top: 0.9rem !important;
    padding-bottom: 0.9rem;
    padding-top: 0.65rem;
}

.billing-concept-total {
    background: #f1f7f6;
    border: 1px solid #d6ebe6;
    border-radius: 0.45rem;
    padding: 0.75rem;
}

.billing-concept-description {
    margin-top: 0.35rem;
}

.billing-concept-description > div,
.billing-concept-description table {
    max-width: 100%;
}

.billing-concept-actions {
    background: #ffffff;
    bottom: 0;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0.9rem 1.25rem 0;
    position: sticky;
    z-index: 3;
}

.billing-concept-actions .as-action {
    min-width: 8.75rem;
}

.billing-grid .billing-status {
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1;
    padding: 0.38rem 0.58rem;
    white-space: nowrap;
}

.billing-status--paid {
    background: #e8f8f1;
    border-color: #bdebd8;
    color: #08745f;
}

.billing-status--pending {
    background: #fff8e6;
    border-color: #f2dda1;
    color: #8a6412;
}

.billing-status--cancelled {
    background: #fff0f0;
    border-color: #f2c4c4;
    color: #b12d2d;
}

.billing-row-actions {
    flex-wrap: nowrap;
    justify-content: center;
}

.billing-popup__intro {
    align-items: flex-start;
    border-bottom: 1px solid #e8edf3;
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
}

.billing-popup__intro h3 {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
}

.billing-popup__intro p {
    color: #64748b;
    font-size: 0.84rem;
    margin: 0.3rem 0 0;
}

.billing-popup__row {
    align-items: center;
    margin-bottom: 0.35rem;
}

.billing-popup__row label {
    color: #415068;
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
    margin: 0;
}

.billing-popup .as-form-actions .as-action,
.billing-popup .client-popup-actions .as-action {
    min-width: 7.5rem;
}

.finance-list-page,
.finance-detail-page,
.collection-page {
    gap: 1.35rem;
}

.finance-grid-card {
    min-width: 0;
}

.finance-grid-card .cl-grid-card__head {
    border-bottom: 1px solid #e8edf3;
    margin: -0.1rem -0.1rem 1rem;
    padding: 0 0.1rem 0.9rem;
}

.finance-grid .dxgvHeader,
.billing-grid .dxgvHeader {
    background: #f6f8fb;
    color: #344054;
    font-family: "DM Sans", sans-serif;
    font-size: 0.76rem;
    font-weight: 750;
}

.finance-grid .dxgvDataRow td,
.billing-grid .dxgvDataRow td {
    color: #334155;
    font-size: 0.8rem;
}

.finance-choice {
    align-items: center;
    background: #f9fbfd;
    border: 1px solid #d7e1eb;
    border-radius: 0.4rem;
    display: flex;
    min-height: 2.65rem;
    padding: 0.45rem 0.7rem;
}

.finance-detail-page > .billing-nav,
.recurring-detail-page > .billing-nav {
    align-self: start;
    margin-bottom: 0.1rem;
}

.billing-document-page .fv-margin {
    margin: 0;
    width: 100%;
}

.billing-document-page h1,
.billing-document-page .cl-page-title {
    color: #0f172a;
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 1.2rem;
}

.billing-document-page .panel-heading .title-panel,
.billing-document-page .panel-heading .panel-title {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 0.95rem;
    font-weight: 750;
    margin: 0;
}

.billing-document-page .panel-body > .row,
.collection-page .panel-body > .row {
    --bs-gutter-y: 0.85rem;
    margin-bottom: 0.35rem;
}

.as-shell .panel-body label,
.as-shell .as-form-field > label,
.as-shell .cl-field > label {
    color: #526076;
    font-size: 0.78rem;
    font-weight: 750;
}

.billing-document-page .Data-Info,
.billing-document-page .Data-info,
.collection-page .Data-Info,
.collection-page .Data-info {
    color: #172033;
    font-weight: 650;
    line-height: 1.45;
    min-height: 2.35rem;
    padding-top: 0.35rem;
}

.collection-page .dxeButtonEdit,
.collection-page .dxeTextBox,
.collection-page .dxeMemo {
    border-color: #d7e1eb;
    border-radius: 0.4rem;
    box-shadow: none;
}

.billing-document-page .panel-body > .row {
    margin-bottom: 0.2rem;
}

.billing-document-page .panel-heading,
.collection-page .panel-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
}

.billing-document-page .panel-heading .as-actions,
.collection-page .panel-heading .as-actions {
    margin-left: auto;
}

.collection-context {
    position: relative;
    z-index: 4;
}

.collection-savebar {
    align-items: center;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dce5ef;
    border-radius: 0.5rem;
    bottom: 1rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.13);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 0.8rem 1rem;
    position: sticky;
    z-index: 20;
}

.collection-page .alert,
.billing-document-page .alert {
    border-radius: 0.45rem;
    font-size: 0.84rem;
}

.as-shell .alert {
    padding-right: 3.25rem;
    position: relative;
}

.as-shell .alert > .finance-alert-close,
.as-shell .alert > .alert-close,
.as-shell .alert > .close {
    align-items: center;
    background: rgba(15, 23, 42, 0.08);
    border: 0;
    border-radius: 0.4rem;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    line-height: 1;
    opacity: 0.72;
    padding: 0;
    position: absolute;
    right: 0.65rem;
    text-decoration: none;
    top: 0.65rem;
    width: 2rem;
}

.as-shell .alert > .finance-alert-close:hover,
.as-shell .alert > .alert-close:hover,
.as-shell .alert > .close:hover {
    background: rgba(15, 23, 42, 0.14);
    color: inherit;
    opacity: 1;
}

.as-shell .alert > .finance-alert-close:focus-visible,
.as-shell .alert > .alert-close:focus-visible,
.as-shell .alert > .close:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(15, 109, 190, 0.22);
    outline: 2px solid #0f6dbe;
    outline-offset: 1px;
}

.as-shell .alert > .finance-alert-close i,
.as-shell .alert > .alert-close i {
    pointer-events: none;
}

.as-shell .alert > p:last-child {
    margin-bottom: 0;
}

.finance-popup .panel,
.billing-document-page .dxpc-content .panel {
    border: 0;
    box-shadow: none;
    margin: 0;
}

.finance-popup .panel-body,
.billing-document-page .dxpc-content .panel-body {
    padding: 1rem;
}

@media (max-width: 1199.98px) {
    .as-nav {
        margin-left: 0;
        margin-top: 1rem;
    }

    .as-user {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.65rem;
    }

    .cl-toolbar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .as-main {
        padding-top: 1.2rem;
    }

    .as-page,
    .as-topbar__inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .cl-hero {
        flex-direction: column;
    }

    .cl-actions,
    .cl-field--actions {
        width: 100%;
    }

    .cl-actions {
        flex-direction: column;
    }

    .cl-actions > a,
    .cl-field--actions .btn {
        justify-content: center;
        width: 100%;
    }

    .cl-toolbar__grid {
        grid-template-columns: 1fr;
    }

    .cl-toolbar,
    .cl-grid-card {
        padding: 1rem;
    }

    .client-page .panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-page .panel-heading .as-actions,
    .import-actions {
        width: 100%;
    }

    .client-page .panel-heading .as-actions .as-action,
    .import-actions .as-action {
        flex: 1 1 auto;
    }

    .as-form-actions,
    .client-popup-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .as-form-actions .as-action,
    .client-popup-actions .as-action {
        justify-content: center;
        width: 100%;
    }

    .client-page .client-comments {
        margin-top: 0;
    }

    .recurring-grid-head {
        align-items: stretch;
        flex-direction: column;
    }

    .recurring-grid-head .as-action {
        width: 100%;
    }

    .fr-page .as-actions--end,
    .fr-page .as-actions--end .as-action {
        justify-content: center;
        width: 100%;
    }

    .billing-nav {
        align-items: stretch;
        display: flex;
        overflow-x: auto;
        width: 100%;
    }

    .billing-nav__item {
        flex: 0 0 auto;
        justify-content: center;
    }

    .billing-hero {
        align-items: flex-start;
    }

    .billing-hero__actions,
    .billing-hero__actions .as-action {
        width: 100%;
    }

    .billing-popup__row {
        align-items: stretch;
    }

    .collection-savebar {
        align-items: stretch;
        bottom: 0.5rem;
        flex-direction: column;
    }

    .collection-savebar .as-action,
    .collection-savebar > div {
        width: 100%;
    }

    .billing-document-page .panel-heading .as-actions,
    .collection-page .panel-heading .as-actions {
        margin-left: 0;
        width: 100%;
    }

    .billing-concepts-head {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-concepts-head .as-action {
        justify-content: center;
        width: 100%;
    }

    .billing-concept-editor__head,
    .billing-concept-form {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .billing-concept-actions {
        margin-left: -0.9rem;
        margin-right: -0.9rem;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

/* Consultas y reportes */
.reports-page,
.report-preview-page {
    display: grid;
    gap: 1.15rem;
}

.reports-hero,
.report-preview-hero {
    align-items: flex-end;
}

.reports-eyebrow {
    color: #0f766e;
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.reports-tabs {
    align-items: center;
    border-bottom: 1px solid #dbe4ee;
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
}

.reports-tabs__item {
    align-items: center;
    border-bottom: 3px solid transparent;
    color: #64748b;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 750;
    gap: 0.5rem;
    margin-bottom: -1px;
    padding: 0.75rem 0.95rem;
    text-decoration: none;
}

.reports-tabs__item:hover,
.reports-tabs__item:focus-visible {
    color: #0f766e;
}

.reports-tabs__item.active {
    border-bottom-color: #079981;
    color: #0f766e;
}

.reports-toolbar {
    align-items: flex-end;
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    padding: 1rem 1.15rem;
}

.reports-toolbar__copy,
.reports-library__head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
}

.reports-toolbar__icon,
.reports-library__icon {
    align-items: center;
    background: #e4f5f0;
    border-radius: 0.42rem;
    color: #087d68;
    display: inline-flex;
    flex: 0 0 2.35rem;
    height: 2.35rem;
    justify-content: center;
}

.reports-toolbar h2,
.reports-result-card h2,
.reports-library h2,
.reports-viewer-card h2 {
    color: #172033;
    font-family: "Manrope", sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    margin: 0;
}

.reports-toolbar p,
.reports-result-card p,
.reports-library p {
    color: #718096;
    font-size: 0.76rem;
    margin: 0.18rem 0 0;
}

.reports-toolbar__controls {
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    gap: 0.75rem;
}

.reports-year-field {
    min-width: 130px;
}

.reports-export-action .btn {
    align-items: center;
    background: #0f6dbe;
    border-color: #0f6dbe;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 750;
    min-height: 38px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.reports-result-card {
    min-width: 0;
    padding: 0;
    position: relative;
}

.reports-result-card__head,
.reports-viewer-card__head {
    align-items: center;
    border-bottom: 1px solid #e5ebf2;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.15rem;
}

.reports-result-card__hint,
.reports-viewer-card__status {
    color: #7b8798;
    font-size: 0.7rem;
    white-space: nowrap;
}

.reports-result-card.is-loading::after {
    background: rgba(255, 255, 255, 0.68);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 5;
}

.reports-pivot-shell,
.reports-document-shell {
    min-width: 0;
    overflow: auto;
}

.reports-pivot-shell {
    padding: 0.75rem;
}

.reports-pivot {
    min-width: 760px;
}

.reports-workspace {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: 270px minmax(0, 1fr);
}

.reports-library {
    overflow: hidden;
    padding: 0;
}

.reports-library__head {
    border-bottom: 1px solid #e5ebf2;
    padding: 1rem;
}

.reports-library__group {
    display: grid;
    gap: 0.4rem;
    padding: 0.9rem 0.75rem;
}

.reports-library__group + .reports-library__group {
    border-top: 1px solid #eef2f6;
}

.reports-library__label,
.reports-viewer-card__kicker {
    color: #7b8798;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.reports-library__label {
    padding: 0 0.4rem;
}

.reports-library__link {
    align-items: center;
    border-radius: 0.45rem;
    color: #253147;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    padding: 0.7rem 0.55rem;
    text-decoration: none;
}

.reports-library__link:hover,
.reports-library__link:focus-visible,
.reports-library__link.active {
    background: #eef7f5;
    color: #0f766e;
}

.reports-library__link.active {
    box-shadow: inset 3px 0 #079981;
}

.reports-library__link-icon {
    align-items: center;
    background: #eef3f8;
    border-radius: 0.38rem;
    color: #0f6dbe;
    display: inline-flex;
    height: 2rem;
    justify-content: center;
}

.reports-library__link strong,
.reports-library__link small {
    display: block;
}

.reports-library__link strong {
    font-size: 0.76rem;
}

.reports-library__link small {
    color: #7b8798;
    font-size: 0.66rem;
    line-height: 1.35;
    margin-top: 0.12rem;
}

.reports-library__arrow {
    color: #9aa5b5;
}

.reports-viewer-card,
.report-preview-card {
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

.reports-viewer-card__kicker {
    display: block;
    margin-bottom: 0.22rem;
}

.reports-viewer-card__status {
    color: #0f766e;
    font-weight: 700;
}

.reports-viewer-card__status .fa {
    font-size: 0.45rem;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.reports-document-shell {
    padding: 0.75rem;
}

.reports-document-shell > div {
    min-width: 760px;
}

.reports-empty-state {
    align-items: center;
    color: #718096;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 390px;
    padding: 2rem;
    text-align: center;
}

.reports-empty-state__icon {
    align-items: center;
    background: #edf3f8;
    border-radius: 50%;
    color: #0f6dbe;
    display: inline-flex;
    font-size: 1.35rem;
    height: 3.5rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 3.5rem;
}

.reports-empty-state h2,
.reports-empty-state h3 {
    color: #253147;
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

.reports-empty-state p {
    font-size: 0.78rem;
    margin: 0.35rem 0 0;
    max-width: 360px;
}

.report-preview-actions {
    flex: 0 0 auto;
}

.reports-document-shell--preview {
    min-height: 560px;
}

@media (max-width: 991.98px) {
    .reports-workspace {
        grid-template-columns: 1fr;
    }

    .reports-library__group {
        display: inline-grid;
        vertical-align: top;
        width: 50%;
    }

    .reports-library__group + .reports-library__group {
        border-left: 1px solid #eef2f6;
        border-top: 0;
    }
}

@media (max-width: 767.98px) {
    .reports-toolbar,
    .reports-result-card__head,
    .reports-viewer-card__head {
        align-items: stretch;
        flex-direction: column;
    }

    .reports-toolbar__controls {
        width: 100%;
    }

    .reports-year-field,
    .reports-export-action,
    .reports-export-action .btn {
        width: 100%;
    }

    .reports-library__group {
        display: grid;
        width: 100%;
    }

    .reports-library__group + .reports-library__group {
        border-left: 0;
        border-top: 1px solid #eef2f6;
    }

    .report-preview-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .report-preview-actions,
    .report-preview-actions .as-action {
        justify-content: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .billing-nav__item {
        transition: none;
    }
}
.weekly-days {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    padding: .75rem 0 .35rem;
}

.weekly-days label {
    margin-left: .35rem;
}

@media (max-width: 1199.98px) {
    .company-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .company-grid {
        grid-template-columns: 1fr;
    }

    .company-card__visual {
        padding: 1rem;
    }

    .company-catalog-page .cl-actions,
    .company-catalog-page .cl-actions .as-action {
        justify-content: center;
        width: 100%;
    }
}

/* Administration directory: navigation only; editors use the shared form system. */
.admin-directory {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding: 1.5rem;
}

.admin-directory__group h2 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 750;
    margin: 0 0 0.75rem;
}

.admin-directory__group h2 .fa {
    color: #2563eb;
    width: 1.25rem;
    text-align: center;
}

.admin-directory__group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-directory__group li + li {
    border-top: 1px solid #e8edf3;
}

.admin-directory__group a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.35rem;
    color: #415068;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.admin-directory__group a:hover,
.admin-directory__group a:focus-visible {
    color: #1d4ed8;
    background: #eff6ff;
}

.admin-directory__group a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .admin-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .admin-directory { grid-template-columns: minmax(0, 1fr); padding: 1rem; gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-directory__group a { transition: none; }
}
/*devepress overrides*/
.dxpcLite_Material .dxpc-header, .dxdpLite_Material .dxpc-header {
    padding: 10px 15px 10px 15px;
    background-color: #f1f1f1;
}
.dxgvPopupEditForm_Material {
    padding:0px;
}