/*
   Base visual de los controles Prv: estructura y puntos de tema, sin decidir colores ni medidas.
   Cada aplicación define las variables --prv-checkbox-* en su propia hoja de tema.
*/
.prv-radzen-checkbox {
    --prv-checkbox-size: var(--prv-checkbox-size-md);
    --prv-checkbox-icon-size: var(--prv-checkbox-icon-size-md);
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 var(--prv-checkbox-size);
    height: var(--prv-checkbox-size);
    justify-content: center;
    vertical-align: middle;
    width: var(--prv-checkbox-size);
}

.prv-radzen-checkbox-xs { --prv-checkbox-size: var(--prv-checkbox-size-xs); --prv-checkbox-icon-size: var(--prv-checkbox-icon-size-xs); }
.prv-radzen-checkbox-sm { --prv-checkbox-size: var(--prv-checkbox-size-sm); --prv-checkbox-icon-size: var(--prv-checkbox-icon-size-sm); }
.prv-radzen-checkbox-lg { --prv-checkbox-size: var(--prv-checkbox-size-lg); --prv-checkbox-icon-size: var(--prv-checkbox-icon-size-lg); }
.prv-radzen-checkbox-xl { --prv-checkbox-size: var(--prv-checkbox-size-xl); --prv-checkbox-icon-size: var(--prv-checkbox-icon-size-xl); }

.prv-radzen-checkbox .rz-chkbox-box {
    align-items: center;
    background-color: var(--prv-checkbox-surface);
    border: 1px solid var(--prv-checkbox-border);
    border-radius: var(--prv-control-border-radius);
    box-sizing: border-box;
    display: flex;
    flex: 0 0 var(--prv-checkbox-size);
    height: var(--prv-checkbox-size);
    justify-content: center;
    width: var(--prv-checkbox-size);
}

.prv-radzen-checkbox .rz-helper-hidden-accessible {
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.prv-radzen-checkbox[aria-checked="true"] .rz-chkbox-box {
    background-color: var(--prv-color-accent);
    border-color: var(--prv-color-accent);
}

.prv-radzen-checkbox[aria-checked="true"] .rz-chkbox-icon::before {
    color: var(--prv-color-accent-contrast);
    content: "✓";
    font-size: var(--prv-checkbox-icon-size);
    font-weight: bold;
    line-height: 1;
}

.prv-checkbox-field {
    align-items: center;
    display: inline-flex;
    height: var(--prv-checkbox-field-height);
    margin-left: var(--prv-checkbox-field-margin-left);
    padding-top: var(--prv-checkbox-field-padding-top);
    vertical-align: middle;
}

.prv-checkbox-field-label {
    cursor: pointer;
    font-size: var(--prv-checkbox-field-label-font-size);
    line-height: var(--prv-checkbox-field-label-line-height);
    margin-left: var(--prv-checkbox-field-label-margin-left);
}

.prv-radzen-mask {
    background-color: var(--prv-mask-surface);
    border: 1px solid var(--prv-mask-border);
    border-radius: var(--prv-control-border-radius);
    box-sizing: border-box;
    color: inherit;
    min-height: var(--prv-mask-height);
    padding: var(--prv-mask-padding);
}

.prv-radzen-mask:focus {
    background-color: var(--prv-mask-surface);
    border-color: var(--prv-mask-focus-border);
    box-shadow: 0 0 0 var(--prv-mask-focus-shadow-size) var(--prv-mask-focus-shadow);
    color: inherit;
}

.prv-radzen-mask-xs { --prv-mask-height: var(--prv-mask-height-xs); --prv-mask-padding: var(--prv-mask-padding-xs); }
.prv-radzen-mask-sm { --prv-mask-height: var(--prv-mask-height-sm); --prv-mask-padding: var(--prv-mask-padding-sm); }
.prv-radzen-mask-md { --prv-mask-height: var(--prv-mask-height-md); --prv-mask-padding: var(--prv-mask-padding-md); }
.prv-radzen-mask-lg { --prv-mask-height: var(--prv-mask-height-lg); --prv-mask-padding: var(--prv-mask-padding-lg); }
.prv-radzen-mask-xl { --prv-mask-height: var(--prv-mask-height-xl); --prv-mask-padding: var(--prv-mask-padding-xl); }

.prv-string-select {
    background: var(--prv-string-select-surface);
    border: 1px solid var(--prv-string-select-border);
    border-radius: var(--prv-control-border-radius);
    color: var(--prv-string-select-text);
    font-size: var(--prv-string-select-font-size);
    height: var(--prv-string-select-height);
    min-width: 0;
    padding: var(--prv-string-select-padding);
    width: 100%;
}

.prv-string-select:focus {
    border-color: var(--prv-color-accent);
    box-shadow: 0 0 0 var(--prv-string-select-focus-shadow-size) var(--prv-color-accent-focus);
    outline: 0;
}

.prv-string-select:disabled { color: var(--prv-string-select-disabled-text); opacity: var(--prv-string-select-disabled-opacity); }

.prv-string-select-xs { --prv-string-select-height: var(--prv-string-select-height-xs); --prv-string-select-padding: var(--prv-string-select-padding-xs); }
.prv-string-select-sm { --prv-string-select-height: var(--prv-string-select-height-sm); --prv-string-select-padding: var(--prv-string-select-padding-sm); }
.prv-string-select-md { --prv-string-select-height: var(--prv-string-select-height-md); --prv-string-select-padding: var(--prv-string-select-padding-md); }
.prv-string-select-lg { --prv-string-select-height: var(--prv-string-select-height-lg); --prv-string-select-padding: var(--prv-string-select-padding-lg); }
.prv-string-select-xl { --prv-string-select-height: var(--prv-string-select-height-xl); --prv-string-select-padding: var(--prv-string-select-padding-xl); }

.prv-radzen-tabs .rz-tabview-nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.prv-radzen-tabs .rz-tabview-nav > li > button {
    appearance: none;
    background-color: var(--prv-tabs-surface) !important;
    border: 0 !important;
    border-bottom: var(--prv-tabs-selected-border-width) solid transparent !important;
    border-right: 1px solid var(--prv-tabs-border) !important;
    color: var(--prv-tabs-text) !important;
    cursor: pointer;
    font-size: var(--prv-tabs-font-size) !important;
    line-height: var(--prv-tabs-line-height) !important;
    padding: var(--prv-tabs-padding) !important;
    white-space: nowrap;
}

.prv-radzen-tabs .rz-tabview-nav > li.rz-tabview-selected > button { border-bottom-color: var(--prv-color-accent) !important; }
.prv-radzen-tabs .rz-tabview-panels { display: none; }

.prv-radzen-tabs-host {
    background-color: var(--prv-tabs-surface);
    border-bottom: var(--prv-tabs-host-border-width) solid var(--prv-tabs-border);
    padding: var(--prv-tabs-host-padding);
}

.prv-radzen-tabs-xs { --prv-tabs-font-size: var(--prv-tabs-font-size-xs); --prv-tabs-line-height: var(--prv-tabs-line-height-xs); --prv-tabs-padding: var(--prv-tabs-padding-xs); }
.prv-radzen-tabs-sm { --prv-tabs-font-size: var(--prv-tabs-font-size-sm); --prv-tabs-line-height: var(--prv-tabs-line-height-sm); --prv-tabs-padding: var(--prv-tabs-padding-sm); }
.prv-radzen-tabs-md { --prv-tabs-font-size: var(--prv-tabs-font-size-md); --prv-tabs-line-height: var(--prv-tabs-line-height-md); --prv-tabs-padding: var(--prv-tabs-padding-md); }
.prv-radzen-tabs-lg { --prv-tabs-font-size: var(--prv-tabs-font-size-lg); --prv-tabs-line-height: var(--prv-tabs-line-height-lg); --prv-tabs-padding: var(--prv-tabs-padding-lg); }
.prv-radzen-tabs-xl { --prv-tabs-font-size: var(--prv-tabs-font-size-xl); --prv-tabs-line-height: var(--prv-tabs-line-height-xl); --prv-tabs-padding: var(--prv-tabs-padding-xl); }

.prv-radzen-calendar-selector-button {
    align-items: center;
    background-color: var(--prv-calendar-trigger-surface);
    border: 1px solid var(--prv-calendar-trigger-border);
    border-radius: var(--prv-control-border-radius);
    color: var(--prv-calendar-trigger-text);
    display: inline-flex;
    height: var(--prv-calendar-trigger-size);
    justify-content: center;
    padding: 0;
    width: var(--prv-calendar-trigger-size);
}

.prv-radzen-calendar-selector-button:hover { background-color: var(--prv-calendar-trigger-hover-surface); }

.prv-radzen-calendar-selector-button:focus {
    background-color: var(--prv-calendar-trigger-hover-surface);
    border-color: var(--prv-color-accent);
    box-shadow: 0 0 0 var(--prv-calendar-trigger-focus-shadow-size) var(--prv-color-accent-focus);
    outline: 0;
}

.prv-radzen-calendar-selector-button-xs { --prv-calendar-trigger-size: var(--prv-calendar-trigger-size-xs); }
.prv-radzen-calendar-selector-button-sm { --prv-calendar-trigger-size: var(--prv-calendar-trigger-size-sm); }
.prv-radzen-calendar-selector-button-md { --prv-calendar-trigger-size: var(--prv-calendar-trigger-size-md); }
.prv-radzen-calendar-selector-button-lg { --prv-calendar-trigger-size: var(--prv-calendar-trigger-size-lg); }
.prv-radzen-calendar-selector-button-xl { --prv-calendar-trigger-size: var(--prv-calendar-trigger-size-xl); }

.prv-radzen-calendar-selector {
    display: inline-block;
    margin-left: var(--prv-calendar-selector-margin-left);
    position: relative;
    vertical-align: middle;
}

.prv-radzen-calendar-selector-popup {
    background-color: var(--prv-calendar-popup-surface);
    border: 1px solid var(--prv-calendar-popup-border);
    box-shadow: var(--prv-calendar-popup-shadow);
    left: var(--prv-calendar-popup-left);
    margin-top: var(--prv-calendar-popup-margin-top);
    padding: var(--prv-calendar-popup-padding);
    position: absolute;
    top: var(--prv-calendar-popup-top);
    z-index: var(--prv-calendar-popup-z-index);
}

.prv-radzen-calendar-selector-popup .rz-calendar {
    color: var(--prv-calendar-text);
    font-size: var(--prv-calendar-font-size);
    min-width: var(--prv-calendar-min-width);
}

.prv-radzen-calendar-selector-popup .rz-calendar-header {
    align-items: center;
    border-bottom: 1px solid var(--prv-calendar-border);
    display: flex;
    justify-content: space-between;
    min-height: var(--prv-calendar-header-min-height);
    padding: var(--prv-calendar-header-padding);
}

.prv-radzen-calendar-selector-popup .rz-calendar-title {
    align-items: center;
    display: inline-flex;
    font-weight: var(--prv-calendar-title-font-weight);
    gap: var(--prv-calendar-title-gap);
}

.prv-radzen-calendar-selector-popup .rz-dropdown {
    display: inline-flex;
    position: relative;
}

.prv-radzen-calendar-selector-popup .rz-helper-hidden-accessible,
.prv-radzen-calendar-selector-popup .rz-dropdown-trigger,
.prv-radzen-calendar-selector-popup .rz-dropdown-panel {
    display: none !important;
}

.prv-radzen-calendar-selector-popup .rz-calendar-prev,
.prv-radzen-calendar-selector-popup .rz-calendar-next {
    background: transparent;
    border: 0;
    color: var(--prv-calendar-text);
    cursor: pointer;
    font: inherit;
    min-height: var(--prv-calendar-navigation-size);
    min-width: var(--prv-calendar-navigation-size);
}

.prv-radzen-calendar-selector-popup .rz-calendar-prev:focus,
.prv-radzen-calendar-selector-popup .rz-calendar-next:focus {
    outline: 1px solid var(--prv-color-accent);
    outline-offset: -2px;
}

.prv-radzen-calendar-selector-popup .rz-calendar-prev-icon,
.prv-radzen-calendar-selector-popup .rz-calendar-next-icon {
    display: none;
}

.prv-radzen-calendar-selector-popup .rz-calendar-prev::before { content: "‹"; font-size: var(--prv-calendar-navigation-font-size); }
.prv-radzen-calendar-selector-popup .rz-calendar-next::before { content: "›"; font-size: var(--prv-calendar-navigation-font-size); }

.prv-radzen-calendar-selector-popup .rz-calendar-view {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.prv-radzen-calendar-selector-popup .rz-calendar-view th {
    color: var(--prv-calendar-text-muted);
    font-size: var(--prv-calendar-weekday-font-size);
    font-weight: var(--prv-calendar-weekday-font-weight);
    height: var(--prv-calendar-weekday-height);
    text-align: center;
}

.prv-radzen-calendar-selector-popup .rz-calendar-view td {
    border-radius: var(--prv-calendar-day-border-radius);
    cursor: pointer;
    height: var(--prv-calendar-day-height);
    padding: 0;
    text-align: center;
}

.prv-radzen-calendar-selector-popup .rz-calendar-view td:hover { background-color: var(--prv-calendar-day-hover-surface); }

.prv-radzen-calendar-selector-popup .rz-calendar-other-month {
    color: var(--prv-calendar-text-muted);
    opacity: var(--prv-calendar-other-month-opacity);
}

.prv-radzen-calendar-selector-popup .rz-state-active {
    background-color: var(--prv-calendar-primary);
    border-radius: var(--prv-calendar-day-border-radius);
    color: var(--prv-calendar-primary-text);
    display: inline-block;
    line-height: var(--prv-calendar-active-day-line-height);
    min-width: var(--prv-calendar-active-day-min-width);
}

.prv-radzen-calendar-selector-popup .rz-calendar-footer,
.prv-radzen-calendar-footer {
    border-top: 1px solid var(--prv-calendar-border);
    padding-top: var(--prv-calendar-footer-padding-top);
    text-align: center;
}

.prv-radzen-calendar-selector-popup .rz-calendar-footer button,
.prv-radzen-calendar-footer button {
    background-color: var(--prv-calendar-footer-button-surface);
    border: 1px solid var(--prv-calendar-footer-button-border);
    border-radius: var(--prv-calendar-day-border-radius);
    color: var(--prv-calendar-footer-button-text);
    cursor: pointer;
    font: inherit;
    margin: var(--prv-calendar-footer-button-margin);
    min-height: var(--prv-calendar-footer-button-min-height);
    padding: var(--prv-calendar-footer-button-padding);
}

.prv-radzen-calendar-selector-popup .rz-calendar-footer button:focus,
.prv-radzen-calendar-footer button:focus {
    border-color: var(--prv-color-accent);
    box-shadow: 0 0 0 var(--prv-calendar-footer-button-focus-shadow-size) var(--prv-color-accent-focus);
    outline: 0;
}

.prv-radzen-calendar-dropdown-panel {
    background-color: var(--prv-calendar-dropdown-surface);
    border: 1px solid var(--prv-calendar-dropdown-border);
    box-shadow: var(--prv-calendar-dropdown-shadow);
    color: var(--prv-calendar-dropdown-text);
    left: var(--prv-calendar-dropdown-left) !important;
    position: absolute;
    top: var(--prv-calendar-dropdown-top) !important;
}

.prv-radzen-calendar-dropdown-panel.prv-radzen-calendar-month-panel { min-width: var(--prv-calendar-month-panel-min-width) !important; }
.prv-radzen-calendar-dropdown-panel.prv-radzen-calendar-year-panel { min-width: var(--prv-calendar-year-panel-min-width) !important; }

.prv-radzen-calendar-selector-popup .rz-calendar-title .rz-dropdown,
.prv-radzen-calendar-selector-popup .rz-calendar-title .rz-dropdown * { cursor: pointer; }

.prv-radzen-calendar-dropdown-panel .rz-dropdown-items {
    list-style: none;
    margin: 0;
    padding: var(--prv-calendar-dropdown-items-padding);
}

.prv-radzen-calendar-dropdown-panel.prv-radzen-calendar-month-panel .rz-dropdown-items-wrapper {
    max-height: none !important;
    overflow: visible !important;
}

.prv-radzen-calendar-dropdown-panel .rz-dropdown-item {
    cursor: pointer;
    padding: var(--prv-calendar-dropdown-item-padding);
}

.prv-radzen-calendar-dropdown-panel .rz-dropdown-item:hover,
.prv-radzen-calendar-dropdown-panel .rz-dropdown-item.rz-state-highlight {
    background-color: var(--prv-calendar-dropdown-item-highlight-surface);
}

.prv-radzen-grid-host {
    display: block;
    max-width: 100%;
    width: 100%;
}

.prv-radzen-data-grid {
    background-color: var(--prv-grid-row);
    color: var(--prv-grid-text);
    font-size: var(--prv-grid-font-size);
    max-width: 100%;
    width: 100%;
}

.prv-radzen-data-grid table {
    border-collapse: collapse;
    max-width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
    width: 100% !important;
}

.prv-radzen-data-grid-fixed-layout table { table-layout: fixed; }

.prv-radzen-data-grid th,
.prv-radzen-data-grid td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.prv-radzen-data-grid .rz-cell-data {
    display: block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.prv-radzen-data-grid .prv-radzen-grid-wrapped-value {
    display: block !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

.prv-radzen-data-grid th {
    background-color: var(--prv-grid-header);
    border: var(--prv-grid-border-width) solid var(--prv-grid-border);
    border-bottom-color: var(--prv-grid-header-bottom-border);
    color: var(--prv-grid-text);
    font-size: var(--prv-grid-header-font-size);
    font-weight: var(--prv-grid-header-font-weight);
    overflow: visible !important;
    padding: var(--prv-grid-header-padding);
    position: relative;
    white-space: nowrap;
}

.prv-radzen-data-grid th.prv-radzen-grid-header-left { text-align: left; }
.prv-radzen-data-grid th.prv-radzen-grid-header-center { text-align: center; }

.prv-radzen-data-grid td {
    background-color: var(--prv-grid-row);
    border: var(--prv-grid-border-width) solid var(--prv-grid-border);
    color: var(--prv-grid-text);
    cursor: default;
    font-size: var(--prv-grid-cell-font-size);
    font-weight: var(--prv-grid-cell-font-weight);
    padding: var(--prv-grid-cell-padding);
    white-space: nowrap;
}

.prv-radzen-data-grid tbody tr:nth-child(odd) td { background-color: var(--prv-grid-row-alternate); }

.prv-radzen-data-grid th.rz-sortable-column,
.prv-radzen-data-grid th.rz-sortable-column .rz-column-title { cursor: pointer; }

.prv-radzen-data-grid th.rz-sortable-column:hover { background-color: var(--prv-grid-sortable-hover-surface); }

.prv-radzen-data-grid th.rz-sortable-column .rz-sortable-column-icon {
    display: inline-block;
    margin-left: var(--prv-grid-sort-icon-margin-left);
    text-align: center;
    width: var(--prv-grid-sort-icon-width);
}

.prv-radzen-data-grid th.rz-sortable-column .rz-sortable-column-icon::before {
    color: var(--prv-grid-sort-icon-color) !important;
    content: "↕" !important;
    font-family: var(--prv-grid-sort-icon-font-family) !important;
    font-size: var(--prv-grid-sort-icon-font-size);
}

.prv-radzen-data-grid th[aria-sort="ascending"] .rz-sortable-column-icon::before {
    color: var(--prv-grid-sort-icon-active-color) !important;
    content: "▲" !important;
    text-shadow: var(--prv-grid-sort-icon-active-shadow);
}

.prv-radzen-data-grid th[aria-sort="descending"] .rz-sortable-column-icon::before {
    color: var(--prv-grid-sort-icon-active-color) !important;
    content: "▼" !important;
    text-shadow: var(--prv-grid-sort-icon-active-shadow);
}

.prv-radzen-data-grid th .rz-column-resizer {
    cursor: col-resize !important;
    float: none !important;
    height: 100% !important;
    position: absolute !important;
    right: var(--prv-grid-column-resizer-right) !important;
    top: 0;
    width: var(--prv-grid-column-resizer-width) !important;
    z-index: var(--prv-grid-column-resizer-z-index);
}

.prv-radzen-data-grid th .rz-column-resizer::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--prv-grid-column-resizer-guide-color) 0 var(--prv-grid-column-resizer-guide-dash),
        transparent var(--prv-grid-column-resizer-guide-dash) var(--prv-grid-column-resizer-guide-gap));
    content: "";
    height: var(--prv-grid-column-resizer-guide-height);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background-color .12s ease, box-shadow .12s ease;
    width: var(--prv-grid-column-resizer-guide-width);
}

.prv-radzen-data-grid th .rz-column-resizer:hover { background-color: var(--prv-grid-column-resizer-hover-surface); }

.prv-radzen-data-grid th .rz-column-resizer:hover::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--prv-grid-column-resizer-hover-guide-color) 0 var(--prv-grid-column-resizer-guide-dash),
        transparent var(--prv-grid-column-resizer-guide-dash) var(--prv-grid-column-resizer-guide-gap));
    box-shadow: var(--prv-grid-column-resizer-hover-guide-shadow);
}
