:root {
    --corp-bg: #eef3f7;
    --corp-bg-deep: #dbe7ee;
    --corp-surface: #ffffff;
    --corp-surface-soft: #f7fafc;
    --corp-border: #d8e2eb;
    --corp-border-strong: #a9bac8;
    --corp-text: #102033;
    --corp-muted: #607285;
    --corp-primary: #0e6687;
    --corp-primary-dark: #0a354d;
    --corp-primary-soft: #e5f3f8;
    --corp-accent: #247a66;
    --corp-accent-soft: #e6f4ef;
    --corp-warning: #b46f14;
    --corp-warning-soft: #fff3dd;
    --corp-shadow: 0 18px 42px rgba(13, 37, 56, 0.11);
    --corp-shadow-soft: 0 10px 24px rgba(13, 37, 56, 0.075);
    --corp-sidebar-width: 190px;
}

html {
    background: var(--corp-bg);
}

body {
    color: var(--corp-text);
    background:
        linear-gradient(120deg, rgba(14, 102, 135, 0.1) 0 1px, transparent 1px 34px),
        linear-gradient(180deg, #f8fbfd 0, var(--corp-bg) 36%, var(--corp-bg-deep) 100%);
}

body.app-body {
    overflow-x: hidden;
}

.app-shell {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.82) 0, rgba(255,255,255,0.18) 280px),
        transparent;
}

.app-topbar,
.portal-header,
.login-header {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(185, 201, 214, 0.8);
    box-shadow: 0 10px 28px rgba(12, 42, 62, 0.09);
    backdrop-filter: blur(12px);
}

.app-topbar-inner,
.portal-header-inner,
.login-header-inner {
    width: min(1540px, calc(100% - 34px));
    min-height: 74px;
}

.app-brand {
    gap: 13px;
}

.app-logo {
    width: 112px;
    max-height: 54px;
    padding: 5px 9px;
    border: 1px solid rgba(216, 226, 235, 0.9);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(13, 37, 56, 0.08);
}

.app-title {
    color: var(--corp-primary-dark);
    font-size: 16px;
    font-weight: 900;
}

.app-subtitle {
    color: var(--corp-muted);
    font-size: 12px;
}

.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-topbar-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid var(--corp-border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--corp-primary-dark);
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: var(--corp-shadow-soft);
}

.app-topbar-link:hover {
    border-color: rgba(14, 102, 135, 0.34);
    background: var(--corp-primary-soft);
    color: var(--corp-primary-dark);
    text-decoration: none;
}

.app-workspace {
    width: min(1540px, calc(100% - 34px));
    max-width: calc(100% - 34px);
    min-height: calc(100vh - 74px);
    gap: 18px;
    padding: 20px 0 42px;
}

.app-sidebar-panel {
    top: 92px;
    min-height: calc(100vh - 114px);
    padding: 12px;
    border-color: rgba(190, 207, 220, 0.92);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,252,0.96)),
        #fff;
    box-shadow: 0 18px 38px rgba(13, 37, 56, 0.12);
}

.app-sidebar-title {
    margin-bottom: 13px;
    padding: 2px 2px 11px;
    color: var(--corp-primary-dark);
    font-size: 12px;
}

.custom-side-menu .rmRootGroup {
    gap: 7px;
}

.custom-side-menu .rmLink,
.custom-side-menu .rmRootLink {
    min-height: 39px !important;
    padding: 9px 10px !important;
    border-color: #d6e4ee !important;
    background: #ffffff !important;
    color: #2d4156 !important;
    font-size: 12px !important;
    font-weight: 820 !important;
    box-shadow: 0 7px 16px rgba(13, 37, 56, 0.06);
}

.custom-side-menu .rmRootGroup > .rmItem > .rmLink:hover,
.custom-side-menu .rmRootGroup > .rmItem > .rmRootLink:hover,
.custom-side-menu .rmRootGroup > .rmSelected > .rmLink,
.custom-side-menu .rmRootGroup > .rmSelected > .rmRootLink,
.custom-side-menu .rmRootGroup > .rmExpanded > .rmLink,
.custom-side-menu .rmRootGroup > .rmExpanded > .rmRootLink {
    border-color: rgba(14, 102, 135, 0.28) !important;
    background: linear-gradient(180deg, #f1fbfd 0%, #e3f3f8 100%) !important;
    color: var(--corp-primary-dark) !important;
    box-shadow: inset 4px 0 0 var(--corp-primary), 0 10px 20px rgba(13, 37, 56, 0.09) !important;
}

.custom-side-menu .rmGroup .rmLink,
.custom-side-menu .rmGroup .rmRootLink {
    min-height: 30px !important;
    font-size: 11px !important;
}

.app-main-panel,
.app-content {
    min-width: 0;
}

.page-card,
.app-content > table,
.app-content .nav-justified,
.app-content .auto-style4,
.app-content .margin-bottom-10,
.modern-radgrid,
.table-condensed {
    border-color: rgba(195, 210, 222, 0.94) !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: var(--corp-shadow-soft) !important;
}

.app-content h1,
.app-content h2,
.app-content h3,
.portal-title,
.login-title {
    color: var(--corp-primary-dark) !important;
    letter-spacing: 0;
}

.portal-body,
.login-body {
    background:
        linear-gradient(120deg, rgba(14, 102, 135, 0.11) 0 1px, transparent 1px 38px),
        linear-gradient(180deg, #f8fbfd 0, #eef4f8 48%, #dbe7ee 100%);
}

.portal-main,
.login-main {
    width: min(1180px, calc(100% - 34px));
    padding-top: 34px;
}

.portal-toolbar {
    align-items: stretch;
    padding: 26px;
    border: 1px solid rgba(195, 210, 222, 0.9);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(242,248,251,0.95) 100%);
    box-shadow: var(--corp-shadow-soft);
}

.portal-title {
    font-size: clamp(27px, 3vw, 38px);
}

.portal-status {
    align-content: end;
}

.status-pill {
    border: 1px solid rgba(14, 102, 135, 0.16);
    background: var(--corp-primary-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.portal-grid {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
}

.module-card {
    position: relative;
    min-height: 128px;
    padding: 19px;
    border-color: rgba(195, 210, 222, 0.94);
    background: #ffffff;
    box-shadow: var(--corp-shadow-soft);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.module-card::after {
    content: "";
    position: absolute;
    left: 19px;
    right: 19px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--corp-primary), var(--corp-accent), #d9a441);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.module-card:hover {
    transform: translateY(-3px);
    border-color: rgba(14, 102, 135, 0.42);
    box-shadow: 0 20px 44px rgba(13, 37, 56, 0.14);
}

.module-card:hover::after {
    opacity: 1;
}

.module-icon {
    width: 54px;
    height: 54px;
    font-size: 17px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
}

.module-desc {
    line-height: 1.45;
}

.dashboard-container {
    max-width: none !important;
    padding: 0 !important;
}

.dashboard-topbar {
    align-items: center !important;
    margin-bottom: 20px !important;
    padding: 24px !important;
    border: 1px solid rgba(195, 210, 222, 0.94);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(241,248,251,0.96));
    box-shadow: var(--corp-shadow-soft);
}

.dashboard-title {
    margin: 0 !important;
    color: var(--corp-primary-dark) !important;
    font-size: clamp(24px, 2.4vw, 34px) !important;
    line-height: 1.12;
}

.quick-action-bar {
    gap: 9px !important;
}

.quick-action-link,
.quick-action-link.primary {
    min-height: 40px !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    border-color: rgba(14, 102, 135, 0.22) !important;
    background: #ffffff !important;
    color: var(--corp-primary-dark) !important;
    box-shadow: 0 8px 18px rgba(13, 37, 56, 0.08) !important;
}

.quick-action-link.primary {
    background: linear-gradient(135deg, var(--corp-primary), var(--corp-accent)) !important;
    color: #ffffff !important;
}

.quick-action-link:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 102, 135, 0.38) !important;
    background: var(--corp-primary-soft) !important;
    text-decoration: none !important;
}

.quick-action-link.primary:hover {
    background: linear-gradient(135deg, #0b5875, #1f6e5d) !important;
    color: #ffffff !important;
}

.commercial-summary-grid,
.dashboard-grid,
.dashboard-ops-grid {
    gap: 16px !important;
}

.commercial-summary-card,
.card,
.ops-card,
.todo-panel,
.calendar-section {
    border: 1px solid rgba(195, 210, 222, 0.94) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.97) !important;
    box-shadow: var(--corp-shadow-soft) !important;
}

.commercial-summary-card,
.ops-card {
    position: relative;
    overflow: hidden;
}

.commercial-summary-card::before,
.ops-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--corp-primary);
}

.commercial-summary-card.success::before {
    background: var(--corp-accent);
}

.commercial-summary-card.warning::before {
    background: #d9a441;
}

.summary-value,
.ops-value,
.card-value {
    color: var(--corp-primary-dark) !important;
}

.summary-label,
.ops-label,
.card-label,
.field-label,
.label-mini {
    color: var(--corp-muted) !important;
    letter-spacing: 0.02em;
}

.card {
    padding: 18px !important;
    backdrop-filter: none !important;
}

.card:hover {
    transform: translateY(-2px) !important;
}

.card-icon {
    border-radius: 8px !important;
    background: var(--corp-warning-soft) !important;
    color: var(--corp-warning) !important;
}

.card-icon.blue {
    background: var(--corp-primary-soft) !important;
    color: var(--corp-primary) !important;
}

.card-icon.purple {
    background: var(--corp-accent-soft) !important;
    color: var(--corp-accent) !important;
}

.card-trend,
.card-trend.positive {
    background: var(--corp-accent-soft) !important;
    color: var(--corp-accent) !important;
    border: 1px solid rgba(36, 122, 102, 0.16);
}

.dashboard-wrapper {
    padding: 0 !important;
    background: transparent !important;
}

.todo-header {
    background: linear-gradient(135deg, var(--corp-primary), var(--corp-accent)) !important;
}

.todo-card {
    border-color: rgba(216, 226, 235, 0.9) !important;
    border-left-color: var(--corp-accent) !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 16px rgba(13, 37, 56, 0.055);
}

.task-create-panel {
    background: #f7fbfd !important;
}

.section-header-modern,
.app-content .section-header-modern,
.app-content form .section-header-modern {
    min-height: 46px !important;
    border-radius: 8px 8px 0 0 !important;
    background: linear-gradient(135deg, var(--corp-primary-dark) 0%, var(--corp-primary) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.modern-radgrid .rgHeader,
.modern-radgrid th,
.RadGrid .rgHeader,
.RadGrid th {
    background: #e7f2f7 !important;
    color: var(--corp-primary-dark) !important;
}

.config-shell .app-content {
    min-height: calc(100vh - 128px);
}

.config-nav {
    border-bottom: 1px solid rgba(195, 210, 222, 0.9);
    background: rgba(247, 250, 252, 0.92);
}

.config-nav-inner {
    width: min(1540px, calc(100% - 34px));
    margin: 0 auto;
    padding: 11px 0;
}

.config-rad-menu .rmRootGroup {
    height: auto;
    min-height: 38px;
}

.config-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
    align-items: center;
    gap: 28px;
    padding: 28px;
    border: 1px solid rgba(195, 210, 222, 0.94);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(241,248,251,0.96));
    box-shadow: var(--corp-shadow-soft);
}

.config-hero img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(195, 210, 222, 0.94);
    box-shadow: 0 16px 34px rgba(13, 37, 56, 0.12);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
select,
textarea,
.controlPersonalizado,
.input-modern,
.grid-select,
.grid-textarea,
.grid-textarea-light,
.modern-input,
.riTextBox,
.RadInput input,
.RadComboBox .rcbInput,
.RadPicker input,
.RadDatePicker input,
.RadDateTimePicker input,
.RadAutoCompleteBox input {
    border-color: #aabccd !important;
    background: #ffffff !important;
}

.btn,
.btn-primary,
.btn-success,
.btn-info,
.btn-default,
.btn-modern,
.btn-login,
.btn-flow,
.btn-view-all,
.action-item {
    border-radius: 8px !important;
}

@media (max-width: 1100px) {
    :root {
        --corp-sidebar-width: 168px;
    }
}

@media (max-width: 850px) {
    body.app-body {
        overflow-x: auto;
    }

    .app-topbar {
        position: static;
    }

    .app-topbar-inner,
    .portal-header-inner,
    .login-header-inner,
    .app-workspace,
    .portal-main,
    .login-main,
    .config-nav-inner {
        width: min(100% - 22px, 1540px);
        max-width: calc(100% - 22px);
    }

    .app-workspace {
        min-height: 0;
        padding-top: 14px;
    }

    .app-sidebar-panel {
        min-height: 0;
    }

    .portal-toolbar,
    .dashboard-topbar,
    .config-hero {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .portal-toolbar,
    .dashboard-topbar {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .portal-status {
        grid-template-columns: 1fr;
        width: 100%;
    }
}

@media (max-width: 620px) {
    .app-topbar-inner,
    .portal-header-inner,
    .login-header-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 0;
    }

    .app-topbar-actions {
        width: 100%;
    }

    .app-topbar-link {
        width: 100%;
        justify-content: center;
    }

    .app-brand {
        min-width: 0;
    }

    .app-title,
    .app-subtitle {
        white-space: normal;
    }

    .portal-grid {
        grid-template-columns: 1fr;
    }

    .module-card {
        grid-template-columns: 48px 1fr;
        min-height: 112px;
    }
}

/* Telerik + WebForms control polish */
.RadForm,
.RadForm_Silk {
    font-family: var(--corp-font) !important;
}

.RadForm_Silk.rfdTextbox input[type="text"],
.RadForm_Silk.rfdTextbox input[type="password"],
.RadForm_Silk.rfdTextbox input[type="number"],
.RadForm_Silk.rfdTextbox input[type="email"],
.RadForm_Silk.rfdTextbox input[type="date"],
.RadForm_Silk.rfdTextarea textarea,
.RadForm_Silk.rfdTextarea textarea.rfdDecorated,
.RadForm_Silk.rfdSelect select,
.RadForm.rfdTextbox input[type="text"],
.RadForm.rfdTextbox input[type="password"],
.RadForm.rfdTextarea textarea,
.RadForm.rfdSelect select,
.RadInput_Silk .riTextBox,
.RadComboBox_Silk .rcbInput,
.RadPicker_Silk .riTextBox,
.RadDatePicker_Silk .riTextBox,
.RadDateTimePicker_Silk .riTextBox,
.RadAutoCompleteBox_Silk input {
    min-height: 42px !important;
    border: 1px solid #a9bdcc !important;
    border-radius: 8px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%) !important;
    color: var(--corp-text) !important;
    box-shadow: inset 0 1px 2px rgba(13, 37, 56, 0.05), 0 1px 0 rgba(255,255,255,0.75) !important;
    font-family: var(--corp-font) !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.RadForm_Silk.rfdTextbox input:hover,
.RadForm_Silk.rfdTextarea textarea:hover,
.RadForm_Silk.rfdSelect select:hover,
.RadInput_Silk .riTextBox:hover,
.RadComboBox_Silk .rcbInput:hover,
.RadPicker_Silk .riTextBox:hover,
.RadDatePicker_Silk .riTextBox:hover,
.RadDateTimePicker_Silk .riTextBox:hover,
.RadAutoCompleteBox_Silk input:hover {
    border-color: #7896aa !important;
    background: #ffffff !important;
}

.RadForm_Silk.rfdTextbox input:focus,
.RadForm_Silk.rfdTextarea textarea:focus,
.RadForm_Silk.rfdSelect select:focus,
.RadInput_Silk .riFocused .riTextBox,
.RadInput_Silk .riTextBox:focus,
.RadComboBox_Silk .rcbFocused .rcbInput,
.RadComboBox_Silk .rcbInput:focus,
.RadPicker_Silk .riTextBox:focus,
.RadDatePicker_Silk .riTextBox:focus,
.RadDateTimePicker_Silk .riTextBox:focus,
.RadAutoCompleteBox_Silk input:focus {
    border-color: var(--corp-primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(14, 102, 135, 0.16), inset 0 1px 2px rgba(13, 37, 56, 0.04) !important;
    outline: none !important;
}

.RadComboBox_Silk,
.RadPicker_Silk,
.RadDatePicker_Silk,
.RadDateTimePicker_Silk,
.RadInput_Silk {
    border-radius: 8px !important;
}

.RadComboBox_Silk .rcbReadOnly,
.RadComboBox_Silk .rcbFocused,
.RadComboBox_Silk .rcbHovered,
.RadPicker_Silk .rcTable,
.RadDatePicker_Silk .rcTable,
.RadDateTimePicker_Silk .rcTable,
.RadInput_Silk .riSingle {
    border-radius: 8px !important;
}

.RadComboBox_Silk .rcbArrowCell,
.RadPicker_Silk .rcCalPopup,
.RadDatePicker_Silk .rcCalPopup,
.RadDateTimePicker_Silk .rcCalPopup {
    border-color: #a9bdcc !important;
    background: linear-gradient(180deg, #f7fbfd 0%, #e7f1f6 100%) !important;
}

.RadComboBoxDropDown_Silk {
    border: 1px solid rgba(169, 189, 204, 0.95) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(13, 37, 56, 0.16) !important;
    overflow: hidden;
}

.RadComboBoxDropDown_Silk .rcbItem,
.RadComboBoxDropDown_Silk .rcbHovered,
.RadComboBoxDropDown_Silk .rcbSelected {
    padding: 9px 12px !important;
    color: #23384d !important;
    font-family: var(--corp-font) !important;
}

.RadComboBoxDropDown_Silk .rcbHovered,
.RadComboBoxDropDown_Silk .rcbSelected {
    background: var(--corp-primary-soft) !important;
    color: var(--corp-primary-dark) !important;
}

.RadForm_Silk .rfdSkinnedButton,
.RadForm_Silk.rfdButton input[type="button"],
.RadForm_Silk.rfdButton input[type="submit"],
.RadForm_Silk.rfdButton button,
.RadButton_Silk,
.RadButton_Silk.rbButton {
    min-height: 38px !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(14, 102, 135, 0.28) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--corp-primary) 0%, #237a68 100%) !important;
    color: #ffffff !important;
    font-family: var(--corp-font) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    box-shadow: 0 10px 18px rgba(13, 92, 119, 0.18), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.RadForm_Silk .rfdSkinnedButton:hover,
.RadForm_Silk.rfdButton input[type="button"]:hover,
.RadForm_Silk.rfdButton input[type="submit"]:hover,
.RadForm_Silk.rfdButton button:hover,
.RadButton_Silk:hover,
.RadButton_Silk.rbHovered {
    background: linear-gradient(135deg, #0b5875 0%, #1d6d5b 100%) !important;
    box-shadow: 0 13px 24px rgba(13, 92, 119, 0.24), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transform: translateY(-1px);
}

.RadForm_Silk .rfdInputDisabled,
.RadForm_Silk.rfdTextbox input[disabled],
.RadForm_Silk.rfdSelect select[disabled],
.RadInput_Silk .riDisabled,
.RadComboBox_Silk .rcbDisabled {
    background: #edf2f6 !important;
    border-color: #d3dee8 !important;
    color: #7c8da0 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.RadForm_Silk .rfdCheckboxUnchecked,
.RadForm_Silk .rfdCheckboxChecked,
.RadForm_Silk .rfdRadioUnchecked,
.RadForm_Silk .rfdRadioChecked {
    border-radius: 6px !important;
    border-color: #91a8ba !important;
    background-color: #ffffff !important;
}

.RadForm_Silk .rfdCheckboxChecked,
.RadForm_Silk .rfdRadioChecked {
    background-color: var(--corp-primary) !important;
    border-color: var(--corp-primary) !important;
}

.RadGrid_Silk,
.RadGrid {
    border-radius: 8px !important;
    border-color: rgba(190, 207, 220, 0.96) !important;
    box-shadow: 0 14px 30px rgba(13, 37, 56, 0.1) !important;
}

.RadGrid_Silk .rgHeader,
.RadGrid_Silk th,
.RadGrid .rgHeader,
.RadGrid th {
    min-height: 38px !important;
    padding: 10px 9px !important;
    border-color: #d9e5ee !important;
    background: linear-gradient(180deg, #edf7fb 0%, #dfeef5 100%) !important;
    color: var(--corp-primary-dark) !important;
}

.RadGrid_Silk .rgRow td,
.RadGrid_Silk .rgAltRow td,
.RadGrid .rgRow td,
.RadGrid .rgAltRow td {
    padding: 9px 10px !important;
}

.RadGrid_Silk .rgHoveredRow td,
.RadGrid .rgHoveredRow td {
    background: #f0f8fb !important;
}

.RadGrid_Silk .rgSelectedRow td,
.RadGrid .rgSelectedRow td {
    background: #dff0f6 !important;
    color: var(--corp-primary-dark) !important;
}

.RadWindow_Silk .rwTitleBar,
.RadWindow .rwTitleBar {
    background: linear-gradient(135deg, var(--corp-primary-dark), var(--corp-primary)) !important;
    color: #ffffff !important;
    border-radius: 8px 8px 0 0 !important;
}

.RadWindow_Silk .rwWindowContent,
.RadWindow .rwWindowContent {
    background: #f8fbfd !important;
}

.RadTabStrip_Silk .rtsLink,
.RadTabStrip .rtsLink {
    border-radius: 8px 8px 0 0 !important;
    color: #40566b !important;
    font-weight: 820 !important;
}

.RadTabStrip_Silk .rtsSelected .rtsLink,
.RadTabStrip .rtsSelected .rtsLink {
    background: #ffffff !important;
    color: var(--corp-primary-dark) !important;
    box-shadow: inset 0 3px 0 var(--corp-primary);
}

.main-container-modern,
.header-minimalist,
.service-grid-layout,
.form-section,
.panel,
.panel-body {
    border-radius: 8px !important;
    border-color: rgba(195, 210, 222, 0.94) !important;
    box-shadow: var(--corp-shadow-soft) !important;
}

.label-modern,
.field-label,
.control-label,
.app-content label {
    color: #50657a !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-transform: uppercase;
}

/* Bootstrap 5 refresh layer */
:root {
    --corp-bg: #eef5f8;
    --corp-bg-deep: #dfeaf0;
    --corp-surface: rgba(255,255,255,0.96);
    --corp-surface-soft: #f6fafc;
    --corp-border: #cfdeea;
    --corp-border-strong: #9fb3c3;
    --corp-primary: #0e6687;
    --corp-primary-dark: #0a354d;
    --corp-accent: #237a68;
    --corp-warning: #c98719;
    --corp-shadow: 0 18px 46px rgba(10, 53, 77, 0.14);
    --corp-shadow-soft: 0 10px 26px rgba(10, 53, 77, 0.09);
    --corp-focus: 0 0 0 3px rgba(14, 102, 135, 0.16);
}

html,
body {
    scrollbar-color: #9fb9ca #e8f1f5;
}

body {
    background:
        radial-gradient(circle at 0 0, rgba(14, 102, 135, 0.13), transparent 30%),
        radial-gradient(circle at 100% 6%, rgba(35, 122, 104, 0.1), transparent 28%),
        linear-gradient(180deg, #f8fbfd 0%, var(--corp-bg) 46%, var(--corp-bg-deep) 100%) !important;
}

.app-shell {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.68) 0, rgba(255,255,255,0.14) 260px),
        transparent !important;
}

.app-workspace {
    align-items: start;
    gap: 18px !important;
    padding-top: 18px !important;
}

.app-sidebar-panel,
.config-nav {
    border: 1px solid rgba(207, 222, 234, 0.95) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,251,253,0.95)) !important;
    box-shadow: 0 18px 42px rgba(10, 53, 77, 0.12) !important;
}

.app-sidebar-panel {
    overflow: hidden;
}

.app-sidebar-panel::before {
    content: "";
    display: block;
    height: 3px;
    margin: -12px -12px 12px;
    background: linear-gradient(90deg, var(--corp-primary), var(--corp-accent), var(--corp-warning));
}

.app-sidebar-title {
    color: var(--corp-primary-dark) !important;
    letter-spacing: .04em;
}

.custom-side-menu .rmLink,
.custom-side-menu .rmRootLink {
    position: relative;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.94) !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.custom-side-menu .rmLink:hover,
.custom-side-menu .rmRootLink:hover {
    transform: translateX(2px);
}

.custom-side-menu .rmRootGroup > .rmItem > .rmLink::after,
.custom-side-menu .rmRootGroup > .rmItem > .rmRootLink::after {
    content: "";
    position: absolute;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(14, 102, 135, 0.2);
}

.custom-side-menu .rmRootGroup > .rmSelected > .rmLink::after,
.custom-side-menu .rmRootGroup > .rmSelected > .rmRootLink::after,
.custom-side-menu .rmRootGroup > .rmExpanded > .rmLink::after,
.custom-side-menu .rmRootGroup > .rmExpanded > .rmRootLink::after {
    background: var(--corp-accent);
}

.app-main-panel,
.config-content,
.app-content {
    min-width: 0;
}

.dashboard-topbar,
.portal-toolbar,
.config-hero,
.page-card,
.main-container-modern,
.header-minimalist,
.form-section,
.panel,
.panel-body,
.app-content > table,
.app-content .auto-style4,
.app-content .margin-bottom-10 {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(207, 222, 234, 0.95) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.99), rgba(244,250,252,0.96)) !important;
    box-shadow: var(--corp-shadow-soft) !important;
}

.dashboard-topbar::before,
.portal-toolbar::before,
.config-hero::before,
.page-card::before,
.main-container-modern::before,
.header-minimalist::before,
.form-section::before,
.panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--corp-primary), var(--corp-accent), var(--corp-warning));
}

.dashboard-title,
.portal-title,
.login-title,
.app-content h1,
.app-content h2,
.app-content h3 {
    color: var(--corp-primary-dark) !important;
    text-wrap: balance;
}

.dashboard-title,
.portal-title {
    font-weight: 900 !important;
}

.commercial-summary-card,
.card,
.ops-card,
.todo-panel,
.calendar-section,
.client-summary-item,
.client-report-card,
.crm-stage-item,
.module-card {
    border: 1px solid rgba(207, 222, 234, 0.96) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(249,252,253,0.98)) !important;
    box-shadow: var(--corp-shadow-soft) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.commercial-summary-card:hover,
.card:hover,
.ops-card:hover,
.todo-panel:hover,
.calendar-section:hover,
.client-summary-item:hover,
.client-report-card:hover,
.crm-stage-item:hover,
.module-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(14, 102, 135, 0.34) !important;
    box-shadow: 0 18px 40px rgba(10, 53, 77, 0.13) !important;
}

.commercial-summary-card::before,
.ops-card::before,
.client-summary-item::before,
.client-report-card::before,
.crm-stage-item::before {
    background: linear-gradient(180deg, var(--corp-primary), var(--corp-accent)) !important;
}

.summary-value,
.ops-value,
.card-value,
.client-summary-item span,
.client-report-card span,
.crm-stage-item span {
    color: var(--corp-primary-dark) !important;
    letter-spacing: 0;
}

.summary-label,
.ops-label,
.card-label,
.client-summary-item strong,
.client-report-card strong,
.crm-stage-item strong {
    color: #596e82 !important;
}

.quick-action-link,
.quick-action-link.primary,
.btn,
.btn-primary,
.btn-success,
.btn-info,
.btn-default,
.btn-modern,
.btn-login,
.btn-flow,
.btn-view-all,
.action-item,
.RadButton_Silk,
.RadButton_Silk.rbButton {
    border-radius: 8px !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.quick-action-link:hover,
.btn:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-modern:hover,
.btn-login:hover,
.btn-flow:hover,
.btn-view-all:hover,
.action-item:hover,
.RadButton_Silk:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-success,
.btn-info,
.btn-modern,
.btn-login,
.btn-flow,
.quick-action-link.primary {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--corp-primary), var(--corp-accent)) !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(14, 102, 135, 0.2) !important;
}

.btn-default,
.btn-view-all,
.quick-action-link:not(.primary) {
    background: #ffffff !important;
    color: var(--corp-primary-dark) !important;
}

.form-control,
.form-select,
.form-check-input,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
select,
textarea,
.controlPersonalizado,
.input-modern,
.grid-select,
.grid-textarea,
.grid-textarea-light,
.modern-input,
.riTextBox,
.RadInput input,
.RadComboBox .rcbInput,
.RadPicker input,
.RadDatePicker input,
.RadDateTimePicker input,
.RadAutoCompleteBox input {
    border: 1px solid #a9bdcc !important;
    border-radius: 8px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f9fcfd 100%) !important;
    color: var(--corp-text) !important;
    box-shadow: inset 0 1px 2px rgba(10, 53, 77, 0.05) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.controlPersonalizado:focus,
.input-modern:focus,
.grid-select:focus,
.grid-textarea:focus,
.grid-textarea-light:focus,
.modern-input:focus,
.riTextBox:focus,
.RadInput input:focus,
.RadComboBox .rcbInput:focus,
.RadPicker input:focus,
.RadDatePicker input:focus,
.RadDateTimePicker input:focus,
.RadAutoCompleteBox input:focus {
    border-color: var(--corp-primary) !important;
    background: #ffffff !important;
    box-shadow: var(--corp-focus), inset 0 1px 2px rgba(10, 53, 77, 0.04) !important;
    outline: none !important;
}

.form-check-input:checked {
    border-color: var(--corp-primary) !important;
    background-color: var(--corp-primary) !important;
}

.RadGrid_Silk,
.RadGrid,
.modern-radgrid {
    overflow: hidden;
    border: 1px solid rgba(207, 222, 234, 0.96) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: var(--corp-shadow-soft) !important;
}

.RadGrid_Silk .rgHeader,
.RadGrid_Silk th,
.RadGrid .rgHeader,
.RadGrid th {
    background: linear-gradient(180deg, #eef7fb 0%, #dfeef5 100%) !important;
    color: var(--corp-primary-dark) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-transform: uppercase;
}

.RadGrid_Silk .rgAltRow td,
.RadGrid .rgAltRow td {
    background: #f8fbfd !important;
}

.RadGrid_Silk .rgHoveredRow td,
.RadGrid .rgHoveredRow td {
    background: #ecf7fb !important;
}

.status-pill,
.label,
.badge,
.card-trend {
    border-radius: 999px !important;
    letter-spacing: 0;
}

@media (max-width: 850px) {
    .app-workspace {
        gap: 14px !important;
    }

    .app-sidebar-panel::before {
        margin-top: -12px;
    }

    .quick-action-bar {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Final form polish: WebForms + Telerik controls */
:root {
    --field-border: #a7bac9;
    --field-border-hover: #7f9aaf;
    --field-bg: #ffffff;
    --field-bg-soft: #f8fbfd;
    --field-focus: rgba(14, 102, 135, 0.18);
    --field-shadow: inset 0 1px 2px rgba(13, 37, 56, 0.055), 0 1px 0 rgba(255,255,255,0.9);
    --field-shadow-hover: inset 0 1px 2px rgba(13, 37, 56, 0.04), 0 6px 14px rgba(13, 37, 56, 0.075);
    --field-shadow-focus: 0 0 0 3px var(--field-focus), 0 8px 18px rgba(13, 37, 56, 0.09);
}

.app-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.app-content select,
.app-content textarea,
.app-content .controlPersonalizado,
.app-content .input-modern,
.app-content .input-modern-full,
.app-content .input-modern-mid,
.app-content .grid-select,
.app-content .grid-textarea,
.app-content .grid-textarea-light,
.app-content .modern-input,
.app-content .riTextBox,
.app-content .RadInput input,
.app-content .RadComboBox .rcbInput,
.app-content .RadPicker input,
.app-content .RadDatePicker input,
.app-content .RadDateTimePicker input,
.app-content .RadAutoCompleteBox input,
.RadForm_Silk.rfdTextbox input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.RadForm_Silk.rfdTextarea textarea,
.RadForm_Silk.rfdSelect select {
    min-height: 42px !important;
    border: 1px solid var(--field-border) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,251,253,0.98) 100%) !important;
    color: #122437 !important;
    font-family: var(--corp-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    box-shadow: var(--field-shadow) !important;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.app-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.app-content select,
.app-content .controlPersonalizado,
.app-content .input-modern,
.app-content .input-modern-full,
.app-content .input-modern-mid,
.app-content .grid-select,
.app-content .modern-input,
.app-content .riTextBox,
.app-content .RadInput input,
.app-content .RadComboBox .rcbInput,
.app-content .RadPicker input,
.app-content .RadDatePicker input,
.app-content .RadDateTimePicker input,
.app-content .RadAutoCompleteBox input {
    padding: 9px 12px !important;
}

.app-content textarea,
.app-content .grid-textarea,
.app-content .grid-textarea-light,
.RadForm_Silk.rfdTextarea textarea {
    min-height: 84px !important;
    padding: 10px 12px !important;
    resize: vertical;
}

.app-content input::placeholder,
.app-content textarea::placeholder,
.app-content .RadInput .riTextBox::placeholder,
.app-content .RadComboBox .rcbInput::placeholder {
    color: #7d90a3 !important;
    font-weight: 500;
}

.app-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):hover,
.app-content select:hover,
.app-content textarea:hover,
.app-content .controlPersonalizado:hover,
.app-content .input-modern:hover,
.app-content .input-modern-full:hover,
.app-content .input-modern-mid:hover,
.app-content .grid-select:hover,
.app-content .grid-textarea:hover,
.app-content .grid-textarea-light:hover,
.app-content .modern-input:hover,
.app-content .riTextBox:hover,
.app-content .RadInput input:hover,
.app-content .RadComboBox .rcbInput:hover,
.app-content .RadPicker input:hover,
.app-content .RadDatePicker input:hover,
.app-content .RadDateTimePicker input:hover,
.app-content .RadAutoCompleteBox input:hover,
.RadForm_Silk.rfdTextbox input:hover,
.RadForm_Silk.rfdTextarea textarea:hover,
.RadForm_Silk.rfdSelect select:hover {
    border-color: var(--field-border-hover) !important;
    background: #ffffff !important;
    box-shadow: var(--field-shadow-hover) !important;
}

.app-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,
.app-content select:focus,
.app-content textarea:focus,
.app-content input.ui-focus,
.app-content select.ui-focus,
.app-content textarea.ui-focus,
.app-content .controlPersonalizado:focus,
.app-content .input-modern:focus,
.app-content .input-modern-full:focus,
.app-content .input-modern-mid:focus,
.app-content .grid-select:focus,
.app-content .grid-textarea:focus,
.app-content .grid-textarea-light:focus,
.app-content .modern-input:focus,
.app-content .riTextBox:focus,
.app-content .RadInput input:focus,
.app-content .RadInput .riFocused .riTextBox,
.app-content .RadComboBox .rcbInput:focus,
.app-content .RadComboBox .rcbFocused .rcbInput,
.app-content .RadPicker input:focus,
.app-content .RadDatePicker input:focus,
.app-content .RadDateTimePicker input:focus,
.app-content .RadAutoCompleteBox input:focus,
.RadForm_Silk.rfdTextbox input:focus,
.RadForm_Silk.rfdTextarea textarea:focus,
.RadForm_Silk.rfdSelect select:focus {
    border-color: var(--corp-primary) !important;
    background: #ffffff !important;
    box-shadow: var(--field-shadow-focus) !important;
    outline: none !important;
}

.app-content select,
.app-content .grid-select,
.RadForm_Silk.rfdSelect select {
    padding-right: 34px !important;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #31556e 50%),
        linear-gradient(135deg, #31556e 50%, transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,253,0.98)) !important;
    background-position:
        calc(100% - 17px) 18px,
        calc(100% - 11px) 18px,
        0 0 !important;
    background-size: 6px 6px, 6px 6px, 100% 100% !important;
    background-repeat: no-repeat !important;
}

.app-content input[disabled],
.app-content select[disabled],
.app-content textarea[disabled],
.app-content input[readonly],
.app-content textarea[readonly],
.app-content .aspNetDisabled,
.app-content .RadInput .riDisabled,
.app-content .RadComboBox .rcbDisabled {
    border-color: #d4dee7 !important;
    background: #eef3f7 !important;
    color: #7b8d9f !important;
    box-shadow: inset 0 1px 1px rgba(13, 37, 56, 0.035) !important;
    cursor: not-allowed !important;
}

.app-content .RadPicker,
.app-content .RadDatePicker,
.app-content .RadDateTimePicker,
.app-content .RadInput,
.app-content .RadComboBox,
.app-content .RadAutoCompleteBox {
    min-height: 42px !important;
    border-radius: 8px !important;
}

.app-content .RadPicker .rcTable,
.app-content .RadDatePicker .rcTable,
.app-content .RadDateTimePicker .rcTable,
.app-content .RadInput table,
.app-content .RadComboBox table {
    overflow: hidden;
    border-radius: 8px !important;
}

.app-content .RadPicker .rcCalPopup,
.app-content .RadDatePicker .rcCalPopup,
.app-content .RadDateTimePicker .rcCalPopup,
.app-content .RadComboBox .rcbArrowCell {
    min-width: 34px !important;
    border-color: var(--field-border) !important;
    background: linear-gradient(180deg, #f5fbfd 0%, #e4f0f6 100%) !important;
    box-shadow: inset 1px 0 0 rgba(255,255,255,0.7) !important;
}

.RadCalendar_Silk,
.RadComboBoxDropDown_Silk,
.RadWindow_Silk {
    border-color: rgba(167, 186, 201, 0.95) !important;
    border-radius: 8px !important;
    box-shadow: 0 20px 46px rgba(13, 37, 56, 0.18) !important;
}

.app-content input[type="checkbox"],
.app-content input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--corp-primary);
}

.field-label,
.label-modern,
.label-mini,
.app-content .form-group > label,
.app-content .form-item > label,
.app-content .form-group > span:first-child,
.app-content .form-item > span:first-child {
    color: #2f4960 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
}

.app-content input[type="submit"],
.app-content input[type="button"],
.app-content button,
.app-content .btn,
.app-content .btn-modern,
.app-content .btn-primary,
.app-content .btn-success,
.app-content .btn-info,
.app-content .btn-default,
.app-content .btn-flow,
.app-content .RadButton,
.app-content .RadButton_Silk,
.RadForm_Silk .rfdSkinnedButton,
.RadForm_Silk.rfdButton input[type="button"],
.RadForm_Silk.rfdButton input[type="submit"],
.RadForm_Silk.rfdButton button {
    min-height: 38px !important;
    border: 1px solid rgba(14, 102, 135, 0.34) !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--corp-primary) 0%, var(--corp-accent) 100%) !important;
    color: #ffffff !important;
    font-family: var(--corp-font) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    box-shadow: 0 10px 20px rgba(14, 102, 135, 0.2), inset 0 1px 0 rgba(255,255,255,0.18) !important;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.app-content input[type="submit"]:hover,
.app-content input[type="button"]:hover,
.app-content button:hover,
.app-content .btn:hover,
.app-content .btn-modern:hover,
.app-content .btn-primary:hover,
.app-content .btn-success:hover,
.app-content .btn-info:hover,
.app-content .btn-default:hover,
.app-content .btn-flow:hover,
.app-content .RadButton:hover,
.app-content .RadButton_Silk:hover,
.app-content .RadButton_Silk.rbHovered,
.RadForm_Silk .rfdSkinnedButton:hover,
.RadForm_Silk.rfdButton input[type="button"]:hover,
.RadForm_Silk.rfdButton input[type="submit"]:hover,
.RadForm_Silk.rfdButton button:hover {
    border-color: rgba(14, 102, 135, 0.46) !important;
    background: linear-gradient(135deg, #0b5875 0%, #1e6e5d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 26px rgba(14, 102, 135, 0.26), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.app-content .btn-default,
.app-content .btn-secondary,
.app-content input[value="Cancelar"],
.app-content input[value="Cerrar"],
.app-content input[value="Limpiar"],
.app-content button[value="Cancelar"] {
    border-color: #b9c8d4 !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef4f8 100%) !important;
    color: var(--corp-primary-dark) !important;
    box-shadow: 0 6px 14px rgba(13, 37, 56, 0.08) !important;
}

.app-content .btn-danger,
.app-content input[value="Eliminar"],
.app-content input[value="Rechazar"],
.app-content button[value="Eliminar"],
.app-content button[value="Rechazar"] {
    border-color: rgba(180, 35, 24, 0.38) !important;
    background: linear-gradient(135deg, #b42318 0%, #8f1f17 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(180, 35, 24, 0.2) !important;
}

/* Stronger visual treatment for high-density forms */
.app-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.app-content select,
.app-content textarea,
.app-content .controlPersonalizado,
.app-content .input-modern,
.app-content .input-modern-full,
.app-content .input-modern-mid,
.app-content .grid-select,
.app-content .grid-textarea,
.app-content .grid-textarea-light,
.app-content .modern-input,
.app-content .riTextBox,
.app-content .RadInput input,
.app-content .RadComboBox .rcbInput,
.app-content .RadPicker input,
.app-content .RadDatePicker input,
.app-content .RadDateTimePicker input,
.app-content .RadAutoCompleteBox input,
.RadForm_Silk.rfdTextbox input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.RadForm_Silk.rfdTextarea textarea,
.RadForm_Silk.rfdSelect select {
    border: 1px solid #8da8bb !important;
    border-top-color: #bdd0dc !important;
    border-bottom-color: #6f8ea5 !important;
    background:
        linear-gradient(90deg, rgba(14, 102, 135, 0.2) 0, rgba(14, 102, 135, 0.2) 4px, transparent 4px),
        linear-gradient(180deg, #ffffff 0%, #f6fbfd 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.88),
        inset 0 -1px 0 rgba(13, 37, 56, 0.05),
        0 7px 15px rgba(13, 37, 56, 0.08) !important;
}

.app-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):hover,
.app-content select:hover,
.app-content textarea:hover,
.app-content .controlPersonalizado:hover,
.app-content .input-modern:hover,
.app-content .input-modern-full:hover,
.app-content .input-modern-mid:hover,
.app-content .grid-select:hover,
.app-content .grid-textarea:hover,
.app-content .grid-textarea-light:hover,
.app-content .modern-input:hover,
.app-content .riTextBox:hover,
.app-content .RadInput input:hover,
.app-content .RadComboBox .rcbInput:hover,
.app-content .RadPicker input:hover,
.app-content .RadDatePicker input:hover,
.app-content .RadDateTimePicker input:hover,
.app-content .RadAutoCompleteBox input:hover,
.RadForm_Silk.rfdTextbox input:hover,
.RadForm_Silk.rfdTextarea textarea:hover,
.RadForm_Silk.rfdSelect select:hover {
    border-color: #0e6687 !important;
    border-top-color: #4b91aa !important;
    border-bottom-color: #094862 !important;
    background:
        linear-gradient(90deg, rgba(14, 102, 135, 0.34) 0, rgba(14, 102, 135, 0.34) 4px, transparent 4px),
        linear-gradient(180deg, #ffffff 0%, #f1f9fc 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.92),
        0 10px 24px rgba(13, 37, 56, 0.13) !important;
    transform: translateY(-1px);
}

.app-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,
.app-content select:focus,
.app-content textarea:focus,
.app-content input.ui-focus,
.app-content select.ui-focus,
.app-content textarea.ui-focus,
.app-content .controlPersonalizado:focus,
.app-content .input-modern:focus,
.app-content .input-modern-full:focus,
.app-content .input-modern-mid:focus,
.app-content .grid-select:focus,
.app-content .grid-textarea:focus,
.app-content .grid-textarea-light:focus,
.app-content .modern-input:focus,
.app-content .riTextBox:focus,
.app-content .RadInput input:focus,
.app-content .RadInput .riFocused .riTextBox,
.app-content .RadComboBox .rcbInput:focus,
.app-content .RadComboBox .rcbFocused .rcbInput,
.app-content .RadPicker input:focus,
.app-content .RadDatePicker input:focus,
.app-content .RadDateTimePicker input:focus,
.app-content .RadAutoCompleteBox input:focus,
.RadForm_Silk.rfdTextbox input:focus,
.RadForm_Silk.rfdTextarea textarea:focus,
.RadForm_Silk.rfdSelect select:focus {
    border-color: #087f8c !important;
    border-top-color: #20a3ae !important;
    border-bottom-color: #04535d !important;
    background:
        linear-gradient(90deg, #087f8c 0, #087f8c 5px, transparent 5px),
        linear-gradient(180deg, #ffffff 0%, #f0fbfd 100%) !important;
    box-shadow:
        0 0 0 3px rgba(8, 127, 140, 0.16),
        0 0 0 6px rgba(217, 164, 65, 0.11),
        0 13px 28px rgba(8, 127, 140, 0.16),
        inset 0 0 0 1px rgba(255,255,255,0.94) !important;
    transform: translateY(-1px);
}

.app-content input.ui-has-value:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.app-content select.ui-has-value,
.app-content textarea.ui-has-value {
    border-left-color: #217762 !important;
    background:
        linear-gradient(90deg, rgba(33, 119, 98, 0.42) 0, rgba(33, 119, 98, 0.42) 5px, transparent 5px),
        linear-gradient(180deg, #ffffff 0%, #f4fbf8 100%) !important;
}

.app-content input.ui-has-value:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,
.app-content select.ui-has-value:focus,
.app-content textarea.ui-has-value:focus {
    background:
        linear-gradient(90deg, #217762 0, #217762 5px, transparent 5px),
        linear-gradient(180deg, #ffffff 0%, #effaf6 100%) !important;
}

.app-content .RadPicker .rcCalPopup,
.app-content .RadDatePicker .rcCalPopup,
.app-content .RadDateTimePicker .rcCalPopup,
.app-content .RadComboBox .rcbArrowCell {
    border-left: 1px solid rgba(14, 102, 135, 0.22) !important;
    background:
        linear-gradient(135deg, #ffffff 0%, #e3f2f7 100%) !important;
    box-shadow: inset 1px 0 0 rgba(255,255,255,0.8), -4px 0 10px rgba(14, 102, 135, 0.08) !important;
}

.app-content .RadPicker:hover .rcCalPopup,
.app-content .RadDatePicker:hover .rcCalPopup,
.app-content .RadDateTimePicker:hover .rcCalPopup,
.app-content .RadComboBox:hover .rcbArrowCell {
    background: linear-gradient(135deg, #e6f7fb 0%, #cde7f0 100%) !important;
}

.app-content .form-group,
.app-content .form-item {
    position: relative;
}

.app-content .form-group > label,
.app-content .form-item > label,
.app-content .form-group > span:first-child,
.app-content .form-item > span:first-child,
.field-label,
.label-modern,
.label-mini {
    color: #28435a !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.app-content input[type="submit"],
.app-content input[type="button"],
.app-content button,
.app-content .btn,
.app-content .btn-modern,
.app-content .RadButton,
.app-content .RadButton_Silk,
.RadForm_Silk .rfdSkinnedButton,
.RadForm_Silk.rfdButton input[type="button"],
.RadForm_Silk.rfdButton input[type="submit"],
.RadForm_Silk.rfdButton button {
    border-bottom-color: rgba(6, 63, 82, 0.72) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 38%),
        linear-gradient(135deg, #0e6687 0%, #217762 72%, #2d856e 100%) !important;
    box-shadow:
        0 12px 23px rgba(14, 102, 135, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -2px 0 rgba(4, 51, 70, 0.18) !important;
}

.app-content .actions-footer {
    gap: 16px !important;
}

.app-content .btn-modern.btn-wait,
.app-content input.btn-modern.btn-wait,
.app-content input[value="Poner en Espera"] {
    border-color: #d69e2e !important;
    border-bottom-color: #9c650d !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(135deg, #f6c453 0%, #d99a18 100%) !important;
    color: #3b2500 !important;
    box-shadow:
        0 12px 24px rgba(217, 154, 24, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.34),
        inset 0 -2px 0 rgba(99, 63, 0, 0.16) !important;
}

.app-content .btn-modern.btn-flow,
.app-content input.btn-modern.btn-flow,
.app-content input[value="Enviar al Flujo"] {
    border-color: #1f9d62 !important;
    border-bottom-color: #11633d !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(135deg, #2fbd74 0%, #16784c 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 24px rgba(31, 157, 98, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -2px 0 rgba(4, 77, 43, 0.18) !important;
}

.app-content .btn-modern.btn-cancel,
.app-content input.btn-modern.btn-cancel,
.app-content input[value="Cancelar"] {
    border-color: #d33a2c !important;
    border-bottom-color: #8f1f17 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(135deg, #e84b3d 0%, #aa241a 100%) !important;
    color: #ffffff !important;
    box-shadow:
        0 12px 24px rgba(180, 35, 24, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -2px 0 rgba(105, 18, 13, 0.18) !important;
}

.app-content .btn-modern.btn-wait:hover,
.app-content input.btn-modern.btn-wait:hover,
.app-content input[value="Poner en Espera"]:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(135deg, #ffd36a 0%, #c8840d 100%) !important;
    color: #2d1c00 !important;
    box-shadow: 0 16px 30px rgba(217, 154, 24, 0.34), inset 0 1px 0 rgba(255,255,255,0.38) !important;
}

.app-content .btn-modern.btn-flow:hover,
.app-content input.btn-modern.btn-flow:hover,
.app-content input[value="Enviar al Flujo"]:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(135deg, #35cc80 0%, #126f44 100%) !important;
    box-shadow: 0 16px 30px rgba(31, 157, 98, 0.34), inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

.app-content .btn-modern.btn-cancel:hover,
.app-content input.btn-modern.btn-cancel:hover,
.app-content input[value="Cancelar"]:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(135deg, #f05a4d 0%, #991f17 100%) !important;
    box-shadow: 0 16px 30px rgba(180, 35, 24, 0.34), inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

body.app-body {
    --corp-sidebar-width: 284px;
    --corp-sidebar-collapsed-width: 76px;
}

.app-topbar-inner,
.app-workspace,
.app-nav-inner,
.app-content {
    width: 100%;
    max-width: none;
}

.app-topbar-inner {
    padding: 0 20px;
}

.app-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.app-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--corp-border);
    border-radius: 10px;
    background: #fff;
    color: var(--corp-primary-dark);
    font-size: 0;
    font-weight: 900;
    box-shadow: var(--corp-shadow-soft);
    position: relative;
}

.app-sidebar-toggle::before {
    content: "";
    width: 18px;
    height: 12px;
    display: block;
    background:
        linear-gradient(var(--corp-primary-dark), var(--corp-primary-dark)) 0 0 / 100% 2px no-repeat,
        linear-gradient(var(--corp-primary-dark), var(--corp-primary-dark)) 0 50% / 100% 2px no-repeat,
        linear-gradient(var(--corp-primary-dark), var(--corp-primary-dark)) 0 100% / 100% 2px no-repeat;
}

.app-topbar-link-danger {
    color: #c0362c;
    border-color: rgba(192, 54, 44, 0.25);
}

.app-topbar-link-danger:hover {
    background: #fff3f1;
    color: #9f251d;
}

.app-workspace {
    grid-template-columns: var(--corp-sidebar-width) minmax(0, 1fr);
    gap: 0;
    padding: 0;
    min-height: 0;
}

.app-sidebar {
    width: var(--corp-sidebar-width);
}

.app-sidebar-panel {
    top: 74px;
    min-height: 0;
    height: auto;
    max-height: calc(100vh - 74px);
    padding: 16px 14px 22px;
    border-width: 0 1px 0 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.app-sidebar-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.app-main-panel,
.config-content,
.app-content {
    min-height: 0;
    padding: 20px 22px 34px;
}

.app-shell,
.config-shell .app-content {
    min-height: 0;
}

.custom-side-menu .rmGroup,
.custom-side-menu .rmSlide,
.custom-side-menu .rmSlide .rmGroup {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
}

.custom-side-menu .rmRootGroup > .rmItem.side-menu-section > .rmLink,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-section > .rmRootLink,
.custom-side-menu .rmGroup .rmItem.side-menu-section > .rmLink,
.custom-side-menu .rmGroup .rmItem.side-menu-section > .rmRootLink {
    min-height: auto !important;
    padding: 10px 10px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--corp-primary-dark) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: default !important;
    pointer-events: none;
}

.custom-side-menu .rmRootGroup > .rmItem.side-menu-section > .rmLink::after,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-section > .rmRootLink::after {
    display: none !important;
}

.custom-side-menu .rmRootGroup,
.custom-side-menu .rmGroup {
    gap: 6px;
}

.custom-side-menu .rmGroup {
    margin: 0 0 12px !important;
    padding: 0 0 0 10px !important;
    border-left: 1px solid #dbe5ec;
}

.custom-side-menu .rmGroup .rmLink,
.custom-side-menu .rmGroup .rmRootLink,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-leaf > .rmLink,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-leaf > .rmRootLink {
    min-height: 36px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.custom-side-menu .rmRootGroup > .rmItem,
.custom-side-menu .rmGroup > .rmItem {
    margin-bottom: 6px;
}

.custom-side-menu .rmLink::before,
.custom-side-menu .rmRootLink::before,
.custom-side-menu .rmLink::after,
.custom-side-menu .rmRootLink::after,
.custom-side-menu .rmLeftImage,
.custom-side-menu .rmLeftArrow,
.custom-side-menu .rmRightArrow,
.custom-side-menu .rmExpandDown,
.custom-side-menu .rmExpandRight {
    box-shadow: none !important;
}

.custom-side-menu .rmRootGroup > .rmItem.side-menu-leaf > .rmLink,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-leaf > .rmRootLink {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%) !important;
    border: 1px solid #d8e4ee !important;
}

.custom-side-menu .rmGroup .rmLink,
.custom-side-menu .rmGroup .rmRootLink {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.custom-side-menu .rmGroup .rmLink:hover,
.custom-side-menu .rmGroup .rmRootLink:hover,
.custom-side-menu .rmGroup .rmSelected > .rmLink,
.custom-side-menu .rmGroup .rmSelected > .rmRootLink {
    background: #eef6fb !important;
    border-color: #d3e4f0 !important;
    color: var(--corp-primary-dark) !important;
}

.custom-side-menu .side-menu-section > .rmText {
    font-size: 12px !important;
}

.custom-side-menu .side-menu-level-2 > .rmLink,
.custom-side-menu .side-menu-level-2 > .rmRootLink {
    font-size: 11px !important;
    color: #506174 !important;
}

body.app-sidebar-collapsed .app-workspace {
    grid-template-columns: var(--corp-sidebar-collapsed-width) minmax(0, 1fr);
}

body.app-sidebar-collapsed .app-sidebar {
    width: var(--corp-sidebar-collapsed-width);
}

body.app-sidebar-collapsed .app-sidebar-title,
body.app-sidebar-collapsed .custom-side-menu .rmText,
body.app-sidebar-collapsed .app-subtitle {
    display: none !important;
}

body.app-sidebar-collapsed .custom-side-menu .rmGroup {
    display: none !important;
}

body.app-sidebar-collapsed .custom-side-menu .rmRootGroup > .rmItem > .rmLink,
body.app-sidebar-collapsed .custom-side-menu .rmRootGroup > .rmItem > .rmRootLink {
    justify-content: center;
    padding: 9px 6px !important;
}

.app-content .header-minimalist,
.app-content .main-container-modern,
.app-content .record-actions-top,
.app-content .tw-admin-shell,
.app-content .tw-admin-header,
.app-content .tw-record-actions {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.app-content [style*="width: 95%; margin: 0 auto"],
.app-content [style*="width:95%; margin: 0 auto"],
.app-content [style*="width: 95%;margin: 0 auto"],
.app-content [style*="margin: 0 auto; background-color: white"],
.app-content [style*="margin: 0 auto;background-color: white"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.app-content .header-subtitle,
.app-content .section-divider span,
.app-content .label-modern,
.app-content label {
    letter-spacing: .03em;
}

.app-content .header-minimalist {
    display: flex;
    justify-content: flex-start;
    padding: 20px 24px;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(13, 37, 56, 0.08);
}

.app-content .header-content {
    width: 100%;
    text-align: left;
}

.app-content .main-title {
    font-size: clamp(24px, 2.6vw, 34px) !important;
}

.app-content .main-container-modern {
    padding: 20px 22px !important;
    border-radius: 18px !important;
}

.app-content .record-actions-top {
    top: 86px;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
}

.app-content .service-grid-layout,
.app-content .row-grid {
    gap: 16px !important;
}

.app-content .service-grid-layout {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.app-content .row-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important;
}

.app-content label,
.app-content .label-modern,
.app-content .form-group > span:first-child {
    color: #44576a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.app-content input[type="text"],
.app-content input[type="number"],
.app-content input[type="password"],
.app-content input[type="email"],
.app-content textarea,
.app-content select,
.app-content .RadInput input,
.app-content .RadComboBox .rcbInput,
.app-content .RadPicker input,
.app-content .RadAutoCompleteBox input {
    min-height: 38px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

.app-content textarea {
    min-height: 92px !important;
}

.app-content .RadAutoCompleteBox {
    min-height: 40px !important;
    border: 1px solid #d5e0ea !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(13, 37, 56, 0.04);
}

.app-content .section-header-modern,
.app-content form .section-header-modern {
    margin-bottom: 14px;
    padding: 14px 18px !important;
    border-radius: 14px;
}

@media (max-width: 980px) {
    .app-topbar-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px;
    }

    .app-workspace {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        width: 100%;
    }

    .app-sidebar-panel {
        position: relative;
        top: 0;
        min-height: auto;
        height: auto;
        border-right-width: 0;
        border-bottom-width: 1px;
    }

    body.app-sidebar-collapsed .app-sidebar {
        display: none;
    }

    .app-content .row-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Final professional form pass over Telerik and legacy ASPX fields */
.app-content .main-container-modern,
.app-content .tw-admin-shell {
    --field-max-compact: 280px;
    --field-max-normal: 360px;
    --field-max-wide: 460px;
}

.app-content .form-group,
.app-content .form-item {
    align-self: start !important;
}

.app-content .service-grid-layout > .form-group,
.app-content .service-grid-layout > .form-item,
.app-content .row-grid > .form-group,
.app-content .row-grid > .form-item {
    width: 100% !important;
    max-width: var(--field-max-normal);
}

.app-content .service-grid-layout > .form-group:first-child,
.app-content .service-grid-layout > .form-item:first-child,
.app-content .row-grid > .col-main,
.app-content .report-span-all,
.app-content .main-container-modern .report-filter-grid .report-span-all {
    max-width: none !important;
}

.app-content .row-grid > .col-side,
.app-content .service-grid-layout > .form-group[style*="60px"],
.app-content .service-grid-layout > .form-item[style*="60px"] {
    max-width: var(--field-max-compact) !important;
}

.app-content .main-container-modern .report-filter-grid .report-span-2 {
    max-width: 100% !important;
}

.app-content .main-container-modern .report-filter-grid .form-group:not(.report-span-all) {
    max-width: var(--field-max-wide);
}

.app-content input[type="text"],
.app-content input[type="password"],
.app-content input[type="number"],
.app-content input[type="email"],
.app-content select,
.app-content textarea,
.app-content .riTextBox,
.app-content .RadInput input,
.app-content .RadComboBox .rcbInput,
.app-content .RadPicker input,
.app-content .RadDatePicker input,
.app-content .RadDateTimePicker input,
.app-content .RadAutoCompleteBox input {
    min-height: 40px !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f4f9fc 100%) !important;
    border: 1px solid #bfd0dc !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 3px 10px rgba(13, 37, 56, 0.06) !important;
}

.app-content textarea,
.app-content .grid-textarea,
.app-content .grid-textarea-light {
    min-height: 96px !important;
}

.app-content input[type="text"]:hover,
.app-content input[type="password"]:hover,
.app-content input[type="number"]:hover,
.app-content input[type="email"]:hover,
.app-content select:hover,
.app-content textarea:hover,
.app-content .riTextBox:hover,
.app-content .RadInput input:hover,
.app-content .RadComboBox .rcbInput:hover,
.app-content .RadPicker input:hover,
.app-content .RadDatePicker input:hover,
.app-content .RadDateTimePicker input:hover,
.app-content .RadAutoCompleteBox input:hover {
    border-color: #8fb0c4 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        0 6px 14px rgba(13, 37, 56, 0.08) !important;
}

.app-content input[type="text"]:focus,
.app-content input[type="password"]:focus,
.app-content input[type="number"]:focus,
.app-content input[type="email"]:focus,
.app-content select:focus,
.app-content textarea:focus,
.app-content .riTextBox:focus,
.app-content .RadInput input:focus,
.app-content .RadComboBox .rcbInput:focus,
.app-content .RadPicker input:focus,
.app-content .RadDatePicker input:focus,
.app-content .RadDateTimePicker input:focus,
.app-content .RadAutoCompleteBox input:focus {
    border-color: #0e6687 !important;
    box-shadow:
        0 0 0 4px rgba(14,102,135,0.12),
        0 8px 18px rgba(14,102,135,0.12) !important;
}

.app-content .RadAutoCompleteBox,
.app-content .RadPicker,
.app-content .RadDatePicker,
.app-content .RadDateTimePicker,
.app-content .RadInput,
.app-content .RadComboBox {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.app-content .RadPicker .rcCalPopup,
.app-content .RadDatePicker .rcCalPopup,
.app-content .RadDateTimePicker .rcCalPopup,
.app-content .RadComboBox .rcbArrowCell {
    width: 40px !important;
    min-width: 40px !important;
    background: linear-gradient(180deg, #edf6fb 0%, #dbeaf3 100%) !important;
}

.app-content .label-modern,
.app-content .form-group > label,
.app-content .form-item > label,
.app-content .form-group > span:first-child,
.app-content .form-item > span:first-child {
    color: #35506a !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
}

.app-content input[type="image"],
.app-content img[id*="btn"],
.app-content img[id*="Button"],
.app-content img[src*="eliminar"],
.app-content img[src*="delete"],
.app-content img[src*="agregar"],
.app-content img[src*="add"] {
    width: 34px !important;
    height: 34px !important;
    padding: 7px !important;
    border: 1px solid #c8d7e2 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef5f9 100%) !important;
    box-shadow: 0 6px 12px rgba(13, 37, 56, 0.08) !important;
    object-fit: contain !important;
    cursor: pointer;
}

.app-content input[type="image"]:hover,
.app-content img[id*="btn"]:hover,
.app-content img[id*="Button"]:hover,
.app-content img[src*="eliminar"]:hover,
.app-content img[src*="delete"]:hover,
.app-content img[src*="agregar"]:hover,
.app-content img[src*="add"]:hover {
    border-color: #8fb0c4 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(13, 37, 56, 0.12) !important;
}

.app-content td:has(> input[type="image"]),
.app-content td:has(> img[id*="btn"]),
.app-content td:has(> img[src*="eliminar"]),
.app-content td:has(> img[src*="agregar"]) {
    width: 48px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Focused pass for Clientes / Ventas / Cotizaciones */
.app-content .service-grid-layout {
    gap: 18px !important;
}

.app-content .service-grid-layout[style*="repeat(4, 1fr)"],
.app-content .service-grid-layout[style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.app-content .service-config-col {
    max-width: 430px !important;
}

.app-content .service-details-col {
    min-width: 320px !important;
}

.app-content .price-summary-card {
    max-width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #d7e3ec !important;
    border-left: 4px solid #4b6d80 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%) !important;
}

.app-content .price-summary-card .price-row {
    display: grid !important;
    grid-template-columns: 96px minmax(130px, 220px) !important;
    gap: 10px !important;
    justify-content: start !important;
    align-items: center !important;
}

.app-content .price-summary-card .highlight-iva,
.app-content .price-summary-card .total-row,
.app-content .price-summary-card .saldo {
    grid-template-columns: 96px auto !important;
}

.app-content .price-summary-card label,
.app-content .price-summary-card span,
.app-content .price-summary-card .text-bold,
.app-content .price-summary-card .text-bold-blue {
    margin: 0 !important;
}

.app-content .price-summary-card .input-price,
.app-content .price-summary-card input[type="text"] {
    width: 220px !important;
    max-width: 220px !important;
}

.app-content .price-summary-card .input-mini,
.app-content .price-summary-card select {
    width: 98px !important;
    max-width: 98px !important;
}

.app-content .RadPicker,
.app-content .RadDatePicker,
.app-content .RadDateTimePicker {
    max-width: 280px;
}

.app-content .report-span-all .RadPicker,
.app-content .report-span-all .RadDatePicker,
.app-content .report-span-all .RadDateTimePicker,
.app-content .service-details-col .RadPicker,
.app-content .service-details-col .RadDatePicker,
.app-content .service-details-col .RadDateTimePicker {
    max-width: 100%;
}

.app-content .RadPicker table,
.app-content .RadDatePicker table,
.app-content .RadDateTimePicker table {
    width: 100% !important;
    table-layout: fixed !important;
}

.app-content .RadPicker .rcInputCell,
.app-content .RadDatePicker .rcInputCell,
.app-content .RadDateTimePicker .rcInputCell {
    width: auto !important;
}

.app-content .RadPicker .rcButtonCell,
.app-content .RadDatePicker .rcButtonCell,
.app-content .RadDateTimePicker .rcButtonCell {
    width: 40px !important;
    min-width: 40px !important;
}

.app-content .RadPicker .rcCalPopup,
.app-content .RadDatePicker .rcCalPopup,
.app-content .RadDateTimePicker .rcCalPopup {
    height: 40px !important;
    border-left: 1px solid #c8d7e2 !important;
    border-radius: 0 12px 12px 0 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.app-content .icon-action-button,
.app-content .icon-save-button,
.app-content input[type="image"][src*="agregar"],
.app-content input[type="image"][src*="agregarAzul"],
.app-content input[type="image"][src*="delete"],
.app-content input[type="image"][src*="editar"],
.app-content input[type="image"][src*="GRABAR"] {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 8px !important;
}

.app-content .icon-action-button,
.app-content input[type="image"][src*="agregar"],
.app-content input[type="image"][src*="agregarAzul"] {
    background: linear-gradient(180deg, #eef8ff 0%, #dff0fb 100%) !important;
    border-color: #b9d7e8 !important;
}

.app-content .icon-save-button,
.app-content input[type="image"][src*="GRABAR"] {
    background: linear-gradient(180deg, #ecfff5 0%, #d9f6e8 100%) !important;
    border-color: #b8dcc8 !important;
}

.app-content input[type="image"][src*="delete"] {
    background: linear-gradient(180deg, #fff6f4 0%, #fde6e1 100%) !important;
    border-color: #efc7c0 !important;
}

.app-content input[type="image"][src*="editar"] {
    background: linear-gradient(180deg, #f6f2ff 0%, #ece4ff 100%) !important;
    border-color: #d6c9f4 !important;
}

.app-content .flex-row-wrap,
.app-content div[style*="display: flex"][style*="gap: 5px"] {
    align-items: center !important;
}

.app-content .flex-row-wrap > input[type="image"],
.app-content div[style*="display: flex"][style*="gap: 5px"] > input[type="image"] {
    flex: 0 0 38px !important;
}

.app-content .choice-source-hidden {
    display: none !important;
}

.app-content .choice-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
}

.app-content button.choice-chip,
.app-content .choice-chip {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 54px;
    padding: 14px 18px;
    border: 1px solid #d8e2ea !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    color: #27405a !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(17, 45, 78, 0.05) !important;
    cursor: pointer;
    transition: .18s ease;
    text-shadow: none !important;
}

.app-content button.choice-chip::before,
.app-content .choice-chip::before {
    content: "";
    width: 12px;
    height: 12px;
    margin-right: 12px;
    border-radius: 999px;
    border: 2px solid #c2d0db;
    background: #fff;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.app-content button.choice-chip:hover,
.app-content .choice-chip:hover {
    border-color: #a8bbc9;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(17, 45, 78, 0.08);
}

.app-content button.choice-chip.is-active,
.app-content .choice-chip.is-active {
    background: linear-gradient(180deg, #f8fbfd 0%, #eef5f9 100%);
    color: #183f5d;
    border-color: #7aa6bd;
    box-shadow:
        0 0 0 2px rgba(83, 141, 171, 0.12),
        0 14px 28px rgba(17, 45, 78, 0.10);
}

.app-content button.choice-chip.is-active::before,
.app-content .choice-chip.is-active::before {
    border-color: #2d6d8d;
    background: #2d6d8d;
    box-shadow: inset 0 0 0 2px #fff;
}

.app-content .choice-option-panel {
    margin-top: 12px;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.app-content .choice-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.app-content button.choice-option,
.app-content .choice-option {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #e1e9f0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #334d67 !important;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: .18s ease;
    flex: 0 1 220px;
    box-shadow: 0 8px 18px rgba(17, 45, 78, 0.04) !important;
    text-shadow: none !important;
}

.app-content button.choice-option::before,
.app-content .choice-option::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid #bfd0db;
    background: #fff;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.app-content button.choice-option:hover,
.app-content .choice-option:hover {
    border-color: #afc3d1;
    background: #f9fcfe;
    box-shadow: 0 10px 22px rgba(17, 45, 78, 0.06);
}

.app-content button.choice-option.is-active,
.app-content .choice-option.is-active {
    border-color: #7aa6bd;
    background: linear-gradient(180deg, #f8fbfd 0%, #eef5f9 100%);
    color: #173f5d;
    box-shadow:
        0 0 0 2px rgba(83, 141, 171, 0.12),
        0 12px 24px rgba(17, 45, 78, 0.08);
}

.app-content button.choice-option.is-active::before,
.app-content .choice-option.is-active::before {
    border-color: #2d6d8d;
    box-shadow: inset 0 0 0 3px #fff;
    background: #2d6d8d;
}

.app-content .sales-linea-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    max-width: none;
    width: 100%;
}

.app-content .sales-linea-choices .choice-chip {
    min-height: 62px;
    min-width: 170px;
    flex: 1 1 calc(25% - 14px);
}

.app-content .sales-servicio-choices {
    max-width: none;
    width: 100%;
}

.app-content .sales-servicio-choices .choice-option {
    flex: 1 1 calc(33.333% - 12px);
    min-width: 220px;
}

.app-content .sales-condiciones-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    max-width: none;
    width: 100%;
}

.app-content .service-config-col {
    max-width: none !important;
    width: 100% !important;
}

.app-content .main-card-service > .service-grid-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: start !important;
}

.app-content .main-card-service > .service-grid-layout > .service-config-col {
    display: contents;
}

.app-content .main-card-service > .service-grid-layout > .service-config-col > .form-item:nth-of-type(1),
.app-content .main-card-service > .service-grid-layout > .service-config-col > .form-item:nth-of-type(2),
.app-content .main-card-service > .service-grid-layout > .service-config-col > .form-item:nth-of-type(3),
.app-content .main-card-service > .service-grid-layout > .service-config-col > .period-box {
    grid-column: 1 / -1 !important;
}

.app-content .main-card-service > .service-grid-layout > .service-config-col > .price-summary-card {
    grid-column: 1 !important;
    grid-row: auto !important;
}

.app-content .main-card-service > .service-grid-layout > .service-details-col {
    grid-column: 2 !important;
    align-self: start !important;
    margin-top: 0 !important;
}

.app-content .sales-condiciones-choices .choice-chip,
.app-content .sales-linea-choices .choice-chip {
    width: auto;
}

.app-content button.choice-chip.is-active,
.app-content .choice-chip.is-active,
.app-content button.choice-option.is-active,
.app-content .choice-option.is-active {
    background: linear-gradient(180deg, #eef6fb 0%, #dfeef8 100%) !important;
    border-color: #4f88a7 !important;
    color: #133b59 !important;
}

.app-content button.choice-chip.is-active::before,
.app-content .choice-chip.is-active::before,
.app-content button.choice-option.is-active::before,
.app-content .choice-option.is-active::before {
    border-color: #2e6f90 !important;
    background: #2e6f90 !important;
}

@media (max-width: 900px) {
    .app-content .choice-option {
        flex-basis: calc(50% - 6px);
    }

    .app-content .sales-linea-choices .choice-chip,
    .app-content .sales-servicio-choices .choice-option {
        flex-basis: calc(50% - 7px);
    }

    .app-content .main-card-service > .service-grid-layout {
        grid-template-columns: 1fr !important;
    }

    .app-content .main-card-service > .service-grid-layout > .service-config-col > .price-summary-card,
    .app-content .main-card-service > .service-grid-layout > .service-details-col {
        grid-column: 1 !important;
    }
}

@media (max-width: 640px) {
    .app-content .choice-option,
    .app-content .sales-linea-choices .choice-chip,
    .app-content .sales-condiciones-choices .choice-chip {
        flex-basis: 100%;
        width: 100%;
    }
}

.app-content [id$='Panel4'] .service-grid-layout {
    grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
}

.app-content [id$='Panel4'] .service-grid-layout > .form-group {
    max-width: none !important;
}

@media (max-width: 1280px) {
    .app-content [id$='Panel4'] .service-grid-layout {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .app-content [id$='Panel4'] .service-grid-layout {
        grid-template-columns: 1fr !important;
    }
}

.app-content .RadPicker .rcCalPopup,
.app-content .RadDatePicker .rcCalPopup,
.app-content .RadDateTimePicker .rcCalPopup {
    font-size: 0 !important;
    color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-size: 16px 16px !important;
}

/* Sidebar final override: keep the Telerik menu visible and match the blue reference. */
.app-sidebar-panel {
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: linear-gradient(180deg, #0f4fd8 0%, #0b42bf 42%, #07308f 100%) !important;
    box-shadow: 0 20px 36px rgba(5, 23, 77, 0.28) !important;
}

.app-sidebar-panel::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
}

.app-sidebar-title {
    color: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.custom-side-menu .rmGroup,
.custom-side-menu .rmSlide,
.custom-side-menu .rmSlide .rmGroup {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
}

.custom-side-menu .rmRootGroup,
.custom-side-menu .rmGroup {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.custom-side-menu .rmText {
    display: block !important;
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.custom-side-menu .rmRootGroup > .rmItem.side-menu-section > .rmLink,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-section > .rmRootLink {
    min-height: 40px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #2d73ff 0%, #0d57f2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(4, 22, 77, 0.3) !important;
    cursor: default !important;
    pointer-events: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.custom-side-menu .rmRootGroup > .rmItem.side-menu-section > .rmLink::after,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-section > .rmRootLink::after {
    background: rgba(255, 255, 255, 0.45) !important;
}

.custom-side-menu .rmRootGroup > .rmItem.side-menu-leaf > .rmLink,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-leaf > .rmRootLink,
.custom-side-menu .rmGroup .rmLink,
.custom-side-menu .rmGroup .rmRootLink {
    min-height: 34px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none !important;
    transform: none !important;
}

.custom-side-menu .rmGroup {
    margin: 2px 0 10px !important;
    padding: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.custom-side-menu .rmGroup .rmLink:hover,
.custom-side-menu .rmGroup .rmRootLink:hover,
.custom-side-menu .rmGroup .rmSelected > .rmLink,
.custom-side-menu .rmGroup .rmSelected > .rmRootLink,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-leaf > .rmLink:hover,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-leaf > .rmRootLink:hover,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-leaf.rmSelected > .rmLink,
.custom-side-menu .rmRootGroup > .rmItem.side-menu-leaf.rmSelected > .rmRootLink {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.custom-side-menu .side-menu-level-2 > .rmLink,
.custom-side-menu .side-menu-level-2 > .rmRootLink,
.custom-side-menu .side-menu-level-3 > .rmLink,
.custom-side-menu .side-menu-level-3 > .rmRootLink {
    font-size: 11px !important;
    font-weight: 700 !important;
}
