/* =====================================================================
   ONC_Telerik.css
   Capa de diseno ONControl para controles Telerik ASP.NET AJAX.
   Toma la identidad de www.oncontrol.com.mx (navy + cian, Open Sans,
   aro de la "O") y la aplica sobre cualquier skin embebido
   (WebBlue, Default, Vista, Windows7, Bootstrap, Metro...).

   Como funciona:
   - Telerik inyecta las hojas de sus skins DESPUES de las nuestras, por eso
     todas las reglas van bajo "html body.onc" para ganar en especificidad
     sin depender del orden de carga ni del skin elegido en cada control.
   - Solo se usa !important donde el markup trae estilos inline
     (BackColor / ForeColor / BorderColor de los controles).
   - Aplica solo a las pantallas dentro de las Master pages (SecureSite / UnsecureSite,
     incluido el login): su <body> lleva class="onc". Las paginas sin Master
     (portales de pago y sitios de clientes) no cargan esta hoja y conservan su diseno;
     excepto ventanas internas, que usan class="onc onc-standalone".
   - Este archivo es identico en ONControl_WEB y ONControl_WEBCFDI.

   Version de cache: las paginas enlazan ONC_Telerik.css?v=AAAA.MM.DD.N; al modificar
   esta hoja, subir ese valor en las Master pages para que los navegadores la recarguen.

   Compatibilidad con actualizaciones de Telerik:
   - No se modifican ni copian los skins embebidos; solo se usan las clases
     publicas del render Lightweight (.RadGrid .rgHeader, .RadInput .riTextBox,
     .rcbInner, .rtsLink, .rmLink...), estables entre versiones.
   - Los iconos de Telerik (fuente WebComponentsIcons / .p-icon) no se tocan.
   - Tras actualizar Telerik.Web.UI abrir /GRL/GuiaEstilos.aspx (WEBCFDI): cada
     control se muestra con todos los skins usados; si alguno difiere, Telerik
     cambio una clase o subio la especificidad de su skin.
   ===================================================================== */

/* ===== Tokens de marca ===== */
:root {
    --onc-navy: #112f51;
    --onc-navy-900: #041223;
    --onc-navy-700: #0b2340;
    --onc-blue: #1e5a96;
    --onc-blue-50: #eaf2fb;
    --onc-cyan: #00c8d7;
    --onc-cyan-700: #00838f;
    --onc-cyan-50: #e5f9fb;
    --onc-ink: #1f2b3a;
    --onc-text: #2b3442;
    --onc-muted: #6b7785;
    --onc-gray-50: #f5f8fb;
    --onc-gray-100: #e6eef6;
    --onc-gray-200: #d5e0ec;
    --onc-gray-300: #b8c6d6;
    --onc-danger: #d64545;
    --onc-danger-50: #fdeeee;
    --onc-success: #1f9d6b;
    --onc-warning: #e0a100;
    --onc-radius: 10px;
    --onc-radius-sm: 6px;
    --onc-shadow-sm: 0 1px 2px rgba(4, 18, 35, .06);
    --onc-shadow: 0 1px 2px rgba(4, 18, 35, .06), 0 8px 24px rgba(4, 18, 35, .08);
    --onc-shadow-lg: 0 2px 4px rgba(4, 18, 35, .08), 0 18px 40px rgba(4, 18, 35, .18);
    --onc-focus: 0 0 0 3px rgba(0, 200, 215, .28);
    --onc-font: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --onc-control-h: 34px;
}

/* =====================================================================
   BASE
   ===================================================================== */
html body.onc {
    color: var(--onc-text);
    font-family: var(--onc-font);
}
/* Estructura completa solo con las Master pages. Las ventanas internas sin Master
   (AddendaComplemento, UnRegister) usan class="onc onc-standalone": solo controles. */
html body.onc:not(.onc-standalone) {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--onc-gray-50);
    color: var(--onc-text);
    font-family: var(--onc-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
html body.onc:not(.onc-standalone) > form { flex: 1 0 auto; display: flex; flex-direction: column; }

/* Telerik fija su propia fuente por skin; se unifica con la de marca. */
html body.onc :where(.RadButton, .RadInput, .RadInput .riTextBox, .RadComboBox, .RadComboBoxDropDown,
    .RadDropDownList, .RadDropDownListDropDown, .RadAutoCompleteBox, .racDropDown, .RadGrid, .RadTreeList,
    .RadTabStrip, .RadMenu, .RadMenuPopup, .RadWindow, .RadNotification, .RadPanelBar, .RadLabel,
    .RadCalendar, .RadPicker, .RadUpload, .RadAsyncUpload, .RadCheckBox, .RadColorPicker, .RadToolTip),
html body.onc :where(.RadGrid, .RadTreeList, .RadComboBoxDropDown, .RadMenu) :where(td, th, input, select, textarea, li) {
    font-family: var(--onc-font);
}

html body.onc h1, html body.onc h2, html body.onc h3, html body.onc h4, html body.onc h5, html body.onc h6 {
    color: var(--onc-navy);
    font-family: var(--onc-font);
    font-variant: normal;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 .6rem;
}
html body.onc h1 { font-size: 1.6rem; font-weight: 800; }
html body.onc h2 { font-size: 1.35rem; }
html body.onc h3 { font-size: 1.15rem; }

html body.onc a:link, html body.onc a:visited { color: var(--onc-blue); text-decoration: none; }
html body.onc a:hover { color: var(--onc-cyan-700); text-decoration: underline; }

html body.onc fieldset {
    background: #fff;
    border: 1px solid var(--onc-gray-100);
    border-radius: var(--onc-radius);
    box-shadow: var(--onc-shadow-sm);
    padding: 1rem 1.25rem;
}
html body.onc legend { color: var(--onc-navy); font-weight: 700; padding: 0 .4rem; }

html body.onc ::selection { background: rgba(0, 200, 215, .25); }

/* Inputs nativos de ASP.NET (asp:TextBox / DropDownList) */
html body.onc input[type="text"]:not([class*="ri"]):not([class*="rcb"]):not([class*="rdd"]),
html body.onc input[type="password"]:not([class*="ri"]),
html body.onc input[type="email"], html body.onc input[type="number"],
html body.onc select:not([class*="rcb"]), html body.onc textarea:not([class*="ri"]) {
    font-family: var(--onc-font);
    font-size: 14px;
    color: var(--onc-ink);
    background: #fff;
    border: 1px solid var(--onc-gray-200);
    border-radius: var(--onc-radius-sm);
    padding: 6px 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body.onc :where(input, select, textarea):focus { outline: none; border-color: var(--onc-cyan); box-shadow: var(--onc-focus); }

/* =====================================================================
   ESTRUCTURA: encabezado, barra de menu, contenido, pie
   ===================================================================== */
html body.onc .onc-header {
    position: relative;
    z-index: 10;
    isolation: isolate;
    color: #fff;
    background:
        radial-gradient(900px 300px at 85% -40%, rgba(0, 200, 215, .22), transparent 60%),
        linear-gradient(135deg, var(--onc-navy-900) 0%, var(--onc-navy) 55%, var(--onc-blue) 100%);
    box-shadow: 0 2px 12px rgba(4, 18, 35, .25);
}
/* El aro de la "O" del logotipo, igual que en el sitio publico */
html body.onc .onc-header__ring {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}
html body.onc .onc-header__ring::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: 50%;
    left: 0;
    height: 320%;
    aspect-ratio: 1;
    transform: translate(-58%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(4, 18, 35, .25) 0 61%, rgba(120, 165, 220, .22) 61.6% 99.4%, transparent 100%);
}
html body.onc .onc-header__bar {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    max-width: 1360px;
    margin: 0 auto;
    padding: 14px 24px;
}
html body.onc .onc-header__logo { display: block; height: 44px; width: auto; }
html body.onc .onc-header__empresa {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.2;
    min-width: 0;
}
html body.onc .onc-header__eyebrow {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--onc-cyan);
}
html body.onc .onc-header__empresa .RadLabel,
html body.onc .onc-header__empresa .RadLabel * {
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 52vw;
}
html body.onc .onc-header__salir:link,
html body.onc .onc-header__salir:visited {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #fff !important;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
html body.onc .onc-header__salir:hover { background: rgba(255, 255, 255, .1); border-color: var(--onc-cyan); text-decoration: none; }

/* Indicador de folios (WEBCFDI) */
html body.onc .onc-folios {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    white-space: nowrap;
}
html body.onc .onc-folios__label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
html body.onc .onc-folios__valor { font-size: 1.35rem !important; font-weight: 800 !important; line-height: 1.2; }

/* Barra del menu principal */
html body.onc .onc-nav {
    background: rgba(4, 18, 35, .35);
    border-top: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(4px);
}
html body.onc .onc-nav__inner { max-width: 1360px; margin: 0 auto; padding: 0 16px; }

/* Encabezado sencillo para paginas sin sesion (login) */
html body.onc .onc-header--simple .onc-header__bar { padding: 18px 24px; }

/* Contenido */
html body.onc .onc-main {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 24px 48px;
    text-align: center;
}

/* Tarjeta reutilizable para envolver formularios: <div class="onc-card"> */
html body.onc .onc-card {
    background: #fff;
    border: 1px solid var(--onc-gray-100);
    border-radius: var(--onc-radius);
    box-shadow: var(--onc-shadow);
    padding: 20px 24px;
    text-align: left;
}

/* Pie */
html body.onc .onc-footer {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--onc-navy-900);
    color: rgba(255, 255, 255, .7);
    font-size: .8rem;
    margin: 0;
    padding: 16px 24px;
    text-align: center;
}
html body.onc .onc-footer__inner {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem 1.25rem;
}
html body.onc .onc-footer a:link, html body.onc .onc-footer a:visited { color: #fff; }
html body.onc .onc-footer a:hover { color: var(--onc-cyan); }
html body.onc .onc-footer__version { color: rgba(255, 255, 255, .45); }

/* Pantalla de acceso */
html body.onc.onc-login .onc-main { display: flex; align-items: flex-start; justify-content: center; padding-top: 56px; }
html body.onc .onc-login-card {
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid var(--onc-gray-100);
    border-top: 4px solid var(--onc-cyan);
    border-radius: var(--onc-radius);
    box-shadow: var(--onc-shadow-lg);
    padding: 32px 32px 24px;
    text-align: left;
}
html body.onc .onc-login-card .onc-eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--onc-cyan-700);
}
html body.onc .onc-login-card h1 { margin: .2rem 0 1.4rem; }
/* Dentro de la tarjeta, etiqueta arriba y control abajo a todo lo ancho */
html body.onc .onc-login-card .onc-eyebrow { display: block; }
html body.onc .onc-login-card .t-row:has(> .t-col) { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0; }
html body.onc .onc-login-card .t-row > .t-col { float: none; width: auto; min-width: 0; max-width: none; padding: 0; text-align: left; }
html body.onc .onc-login-card .t-col.LayoutColumn_Titulo { flex: 0 0 100%; padding: 0 0 4px; }
html body.onc .onc-login-card .t-col.LayoutColumn_Titulo:empty { display: none; }
html body.onc .onc-login-card .t-col.LayoutColumn_Control,
html body.onc .onc-login-card .t-col.Row_Boton { flex: 1 1 200px; padding: 0 0 14px; }
html body.onc .onc-login-card .t-col.Row_Boton { padding-top: 6px; }
html body.onc .onc-login-card .t-col.LayoutColumn_Validador { flex: 0 0 18px; padding-left: 4px; }
html body.onc .onc-login-card .RadButton.rbButton { min-height: 40px; font-size: 15px; }

/* Login con campos apilados sin RadPageLayout (CFDRecepcion) */
html body.onc .onc-login-campo { position: relative; padding-bottom: 14px; }
html body.onc .onc-login-campo > label { display: block; font-weight: 600; color: var(--onc-text); padding-bottom: 4px; }
html body.onc .onc-login-campo > span[id*="Validator"] { position: absolute; right: -16px; top: 26px; }
html body.onc .onc-login-campo--boton { padding-top: 6px; }
html body.onc .onc-login-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--onc-gray-100); }
html body.onc a.onc-login-registro { font-weight: 600; }
/* Nombre de empresa como asp:Label (sin RadLabel) */
html body.onc .onc-header__empresa .onc-header__empresa-nombre {
    color: #fff !important; font-size: 1.05rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw;
}
/* Paginas de pago de ONControl_Admin (CompraFolios / PagoFactura): sin Master,
   body class="onc onc-pago"; el panel principal se presenta como tarjeta. */
html body.onc.onc-pago .onc-main { max-width: 640px !important; margin: 0 auto; }
html body.onc.onc-pago [id$="RP_MainPanel"],
html body.onc.onc-pago [id$="RP_Main"] {
    background: #fff !important;
    border: 1px solid var(--onc-gray-100) !important;
    border-top: 4px solid var(--onc-cyan) !important;
    border-radius: var(--onc-radius);
    box-shadow: var(--onc-shadow-lg);
    text-align: left;
}
html body.onc.onc-pago .SmallPage { background: transparent !important; }
/* Barras de seccion de las paginas de pago (antes #4C6C96) */
html body.onc.onc-pago td[style*="#4C6C96" i],
html body.onc.onc-pago span[style*="#4C6C96" i] {
    background: var(--onc-navy) !important;
    border-radius: var(--onc-radius-sm);
    letter-spacing: .06em;
}
html body.onc.onc-pago span[style*="#4C6C96" i] { padding-left: 10px !important; box-sizing: border-box; }
html body.onc.onc-pago .onc-footer .Smallcontainer { max-width: 640px; margin: 0 auto; line-height: 1.8; }
/* RadPageLayout: filas de formulario titulo / control */
html body.onc div.t-row.LayoutRow_Titulo,
html body.onc div.t-row.LayoutRow_Control { color: var(--onc-text); }
html body.onc div.t-col.LayoutColumn_Titulo { color: var(--onc-muted); }
html body.onc div.t-col.LayoutColumn_Titulo .RadLabel { color: var(--onc-text) !important; font-weight: 600 !important; }
html body.onc td.ControlColumnaTitulo { color: var(--onc-muted); font-weight: 600; }

/* =====================================================================
   RadButton  (Lightweight: .rbButton / Classic: .rbSkinnedButton)
   ===================================================================== */
html body.onc .RadButton.rbButton:not(.rbImageButton),
html body.onc .RadButton.rbSkinnedButton,
html body.onc a.RadButton.rbSkinnedButton .rbDecorated {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: var(--onc-control-h);
    height: auto;
    padding: 6px 18px;
    /* Todos los botones uniformes: navy con texto blanco; el cian solo en el foco. */
    border: 1px solid var(--onc-navy) !important;
    border-radius: 8px;
    background: var(--onc-navy) !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: none;
    box-shadow: var(--onc-shadow-sm);
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
html body.onc .RadButton.rbButton .rbText,
html body.onc .RadButton.rbButton .rbIcon,
html body.onc .RadButton.rbButton .rbPrimaryIcon { color: inherit !important; }
html body.onc .RadButton.rbButton .rbText { padding: 0; }
html body.onc .RadButton.rbButton:not(.rbImageButton):hover,
html body.onc .RadButton.rbButton.rbHovered:not(.rbImageButton) {
    background: var(--onc-blue) !important;
    border-color: var(--onc-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(0, 200, 215, .25);
}
html body.onc .RadButton.rbButton:active,
html body.onc .RadButton.rbButton.rbPressed { transform: translateY(1px); }
html body.onc .RadButton.rbButton:focus,
html body.onc .RadButton.rbButton.rbFocused { outline: none; box-shadow: var(--onc-focus); }

/* Render Classic del RadButton (<span class="rbSkinnedButton"><input class="rbDecorated">):
   el input interno trae el sprite del skin; se vuelve transparente y hereda el color. */
html body.onc .RadButton.rbSkinnedButton { padding: 0; overflow: hidden; }
html body.onc .RadButton.rbSkinnedButton input.rbDecorated,
html body.onc .RadButton.rbSkinnedButton .rbDecorated {
    width: 100%;
    height: auto;
    min-height: calc(var(--onc-control-h) - 2px);
    margin: 0;
    padding: 6px 18px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
    font-family: var(--onc-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
/* Classic con icono: se reserva su espacio a la izquierda */
html body.onc .RadButton.rbSkinnedButton:has(.rbPrimaryIcon) .rbDecorated { padding-left: 34px !important; padding-right: 8px !important; font-size: 13px; text-align: left; }
html body.onc .RadButton.rbSkinnedButton .rbPrimaryIcon { left: 12px !important; top: 50% !important; margin-top: -8px; z-index: 1; }

/* Navy explicito (igual al default; se conserva por compatibilidad): onc-btn-navy / onc-btn-principal */
/* Secundario opcional (blanco con contorno): CssClass="onc-btn-secundario" */
html body.onc .RadButton.rbButton.onc-btn-secundario { background: #fff !important; border-color: var(--onc-gray-200) !important; color: var(--onc-navy) !important; }
html body.onc .RadButton.rbButton.onc-btn-secundario:hover { background: var(--onc-cyan-50) !important; border-color: var(--onc-cyan) !important; color: var(--onc-navy) !important; }
/* Acento cian: CssClass="onc-btn-acento" */
html body.onc .RadButton.rbButton.onc-btn-acento { background: var(--onc-cyan) !important; border-color: var(--onc-cyan) !important; color: var(--onc-navy-900) !important; }
/* Peligro: CssClass="onc-btn-peligro" */
html body.onc .RadButton.rbButton.onc-btn-peligro { background: #fff !important; border-color: var(--onc-danger) !important; color: var(--onc-danger) !important; }
html body.onc .RadButton.rbButton.onc-btn-peligro:hover { background: var(--onc-danger) !important; color: #fff !important; }

html body.onc .RadButton.rbButton.rbDisabled,
html body.onc .RadButton.rbButton[disabled],
html body.onc .RadButton.rbButton.rbDisabled:hover {
    background: var(--onc-gray-100) !important;
    border-color: var(--onc-gray-200) !important;
    color: var(--onc-muted) !important;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

/* Botones tipo liga / imagen / toggle: sin "pastilla" */
html body.onc .RadButton.rbLinkButton,
html body.onc .RadButton.rbImageButton,
html body.onc .RadButton.RadCheckBox,
html body.onc .RadButton.RadRadioButton,
html body.onc .RadButton.rbToggleButton:not(.rbButton) {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
}
/* RadImageButton pinta su imagen con background-image inline: no se debe borrar */
html body.onc .RadButton.rbImageButton {
    display: inline-block;
    min-width: 30px;
    min-height: 30px;
    margin: 0 4px;
    padding: 0;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    vertical-align: middle;
    cursor: pointer;
}
html body.onc .RadButton.rbLinkButton { color: var(--onc-blue) !important; font-weight: 600; }
html body.onc .RadButton.rbLinkButton:hover { color: var(--onc-cyan-700) !important; }
html body.onc .RadImageButton { border-radius: 8px; transition: opacity .15s ease, transform .05s ease; }
html body.onc .RadImageButton:hover { opacity: .85; }

/* RadCheckBox / RadRadioButton / ToggleButton tipo check */
html body.onc .RadButton.RadCheckBox,
html body.onc .RadButton.RadRadioButton,
html body.onc :where(.RadCheckBox, .RadRadioButton) .rbText { color: var(--onc-text) !important; font-weight: 400; }
html body.onc :where(.RadCheckBox, .RadRadioButton, .rbToggleButton) :where(.rbToggleCheckboxChecked, .rbToggleCheckboxFilled, .rbToggleRadioChecked) { color: var(--onc-cyan-700) !important; }
html body.onc :where(.RadCheckBox, .RadRadioButton, .rbToggleButton) :where(.rbToggleCheckbox, .rbToggleRadio) { color: var(--onc-gray-300); }
html body.onc input[type="checkbox"], html body.onc input[type="radio"] { accent-color: var(--onc-cyan-700); }

/* =====================================================================
   RadInput: RadTextBox, RadNumericTextBox, RadMaskedTextBox, RadDateInput
   ===================================================================== */
html body.onc .RadInput .riTextBox,
html body.onc .RadInputMgr {
    min-height: var(--onc-control-h);
    height: auto;
    padding: 6px 10px;
    box-sizing: border-box;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--onc-gray-200) !important;
    border-radius: var(--onc-radius-sm);
    color: var(--onc-ink) !important;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body.onc .RadInput textarea.riTextBox { min-height: 72px; }

/* =====================================================================
   Validacion de campos (RequiredFieldValidator en LayoutColumn_Validador)
   - El "*" ya no ocupa columna: el control usa todo el ancho de la fila.
   - Cuando el validador se muestra (su style ya no trae visibility:hidden ni display:none;
     aplica a validacion en cliente y a la que regresa del servidor tras un postback AJAX),
     el control se marca en rojo y aparece "Campo requerido" debajo.
   ===================================================================== */
html body.onc div.t-row:has(> div.t-col.LayoutColumn_Validador) { display: flex !important; flex-wrap: nowrap; align-items: flex-start; position: relative; }
html body.onc div.t-row:has(> div.t-col.LayoutColumn_Validador) > div.t-col.LayoutColumn_Control { flex: 1 1 auto; width: auto !important; max-width: none !important; }
html body.onc div.t-row:has(> div.t-col.LayoutColumn_Validador) > div.t-col.LayoutColumn_Validador {
    position: static !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: visible;
}
html body.onc div.t-col.LayoutColumn_Validador > span {
    position: absolute;
    left: 15px; /* mismo padding-left de LayoutColumn_Control (ONC_Styles.css) */
    bottom: 0;
    font-size: 0 !important;
    line-height: 0;
    color: transparent !important;
    white-space: nowrap;
    pointer-events: none;
}
html body.onc div.t-col.LayoutColumn_Validador > span:not([style*="hidden" i], [style*="none" i])::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--onc-danger);
    color: #fff;
    font: 700 10px/1 var(--onc-font);
    vertical-align: -2px;
}
html body.onc div.t-col.LayoutColumn_Validador > span:not([style*="hidden" i], [style*="none" i])::after {
    content: "Campo requerido";
    color: var(--onc-danger);
    font: 600 12px/1.2 var(--onc-font);
}
html body.onc div.t-row:has(> div.t-col.LayoutColumn_Validador > span:not([style*="hidden" i], [style*="none" i])) { padding-bottom: 20px !important; }
html body.onc div.t-row:has(> div.t-col.LayoutColumn_Validador > span:not([style*="hidden" i], [style*="none" i])) > div.t-col.LayoutColumn_Control :is(.riTextBox, .rcbInner, .rddlInner, .racTokenList) {
    border-color: var(--onc-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .15) !important;
}
/* Tarjeta de login: conserva su acomodo (titulo arriba, control abajo) */
html body.onc .onc-login-card div.t-row:has(> div.t-col.LayoutColumn_Validador) { flex-wrap: wrap; }
/* Donde el control no lleva padding izquierdo, el mensaje alinea al borde */
html body.onc :is(.onc-login-card, .RadGrid) div.t-col.LayoutColumn_Validador > span { left: 0; }
@media (max-width: 767px) { html body.onc div.t-col.LayoutColumn_Validador > span { left: 0; } }
/* Titulo del campo en rojo mientras falte */
html body.onc div.t-col:has(> div.t-row > div.t-col.LayoutColumn_Validador > span:not([style*="hidden" i], [style*="none" i])) > div.t-row.LayoutRow_Titulo .RadLabel { color: var(--onc-danger) !important; }
html body.onc .RadInput .riTextBox.riHover { border-color: var(--onc-gray-300) !important; }
html body.onc .RadInput .riTextBox.riFocused,
html body.onc .RadInput .riTextBox:focus {
    border-color: var(--onc-cyan) !important;
    box-shadow: var(--onc-focus);
    outline: none;
}
html body.onc .RadInput .riTextBox.riEmpty { color: var(--onc-muted) !important; font-style: normal; }
html body.onc .RadInput .riTextBox.riRead,
html body.onc .RadInput .riTextBox[readonly] { background: var(--onc-gray-50) !important; }
html body.onc .RadInput .riTextBox.riDisabled,
html body.onc .RadInput .riTextBox[disabled] {
    background: var(--onc-gray-100) !important;
    color: var(--onc-muted) !important;
    opacity: 1;
    cursor: not-allowed;
}
html body.onc .RadInput .riTextBox.riError,
html body.onc .RadInput .riTextBox.riError:hover {
    border-color: var(--onc-danger) !important;
    background: var(--onc-danger-50) !important;
    color: var(--onc-danger) !important;
}
/* Flechas del RadNumericTextBox */
html body.onc .RadInput .riSpin a { border-color: var(--onc-gray-200); background-color: var(--onc-gray-50); }
html body.onc .RadInput .riSpin a:hover { background-color: var(--onc-gray-100); }
/* Etiqueta interna del control (Label="...") */
html body.onc .RadInput .riLabel { color: var(--onc-muted); font-weight: 600; padding-right: .5rem; }

/* Validadores ASP.NET */
html body.onc span[id*="Validator"], html body.onc .onc-error { color: var(--onc-danger) !important; font-weight: 600; }

/* =====================================================================
   RadDatePicker / RadDateTimePicker / RadCalendar
   ===================================================================== */
html body.onc .RadPicker .rcSelect,
html body.onc .RadPicker .rcCalPopup,
html body.onc .RadPicker .rcTimePopup {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--onc-blue) !important;
    border-radius: var(--onc-radius-sm);
    transition: background-color .15s ease;
}
html body.onc .RadPicker .rcCalPopup:hover,
html body.onc .RadPicker .rcTimePopup:hover { background-color: var(--onc-cyan-50); }
html body.onc .RadCalendar {
    background: #fff;
    border: 1px solid var(--onc-gray-100) !important;
    border-radius: var(--onc-radius);
    box-shadow: var(--onc-shadow-lg);
    overflow: hidden;
}
html body.onc .RadCalendar .rcTitlebar {
    background: var(--onc-navy) !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
}
html body.onc .RadCalendar .rcTitlebar :where(a, span, .rcTitle) { color: #fff !important; }
html body.onc .RadCalendar .rcMain { background: #fff; border: 0; }
html body.onc .RadCalendar .rcMain th,
html body.onc .RadCalendar .rcWeek th { color: var(--onc-muted); font-weight: 600; background: #fff; border: 0; }
html body.onc .RadCalendar .rcRow td a,
html body.onc .RadCalendar .rcRow td span { border-radius: var(--onc-radius-sm); color: var(--onc-ink); }
html body.onc .RadCalendar .rcRow td.rcOtherMonth a { color: var(--onc-gray-300); }
html body.onc .RadCalendar .rcRow td.rcHover a,
html body.onc .RadCalendar .rcRow td a:hover { background: var(--onc-cyan-50) !important; border-color: transparent !important; color: var(--onc-navy) !important; }
html body.onc .RadCalendar .rcRow td.rcSelected a,
html body.onc .RadCalendar .rcRow td.rcSelected span {
    background: var(--onc-cyan) !important;
    background-image: none !important;
    border-color: var(--onc-cyan) !important;
    color: var(--onc-navy-900) !important;
    font-weight: 700;
}
html body.onc .RadCalendar .rcRow td.rcToday a { box-shadow: inset 0 0 0 1px var(--onc-cyan); font-weight: 700; }
html body.onc .RadCalendarTimeView { border-radius: var(--onc-radius); box-shadow: var(--onc-shadow-lg); }
html body.onc .RadCalendarTimeView td a:hover { background: var(--onc-cyan-50) !important; }
html body.onc .RadCalendarTimeView .rcSelected a { background: var(--onc-cyan) !important; color: var(--onc-navy-900) !important; }

/* =====================================================================
   RadComboBox / RadDropDownList / RadAutoCompleteBox
   ===================================================================== */
html body.onc .RadComboBox .rcbInner,
html body.onc .RadDropDownList .rddlInner,
html body.onc .RadAutoCompleteBox .racTokenList {
    min-height: var(--onc-control-h);
    box-sizing: border-box;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--onc-gray-200) !important;
    border-radius: var(--onc-radius-sm);
    box-shadow: none;
    color: var(--onc-ink) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
html body.onc .RadComboBox .rcbInner { padding-top: 5px; padding-bottom: 5px; }
html body.onc .RadComboBox .rcbInput,
html body.onc .RadDropDownList .rddlFakeInput { color: var(--onc-ink) !important; font-size: 14px; }
html body.onc .RadComboBox .rcbHovered .rcbInner,
html body.onc .RadComboBox .rcbInner:hover,
html body.onc .RadDropDownList .rddlInner:hover { border-color: var(--onc-gray-300) !important; }
html body.onc .RadComboBox .rcbFocused .rcbInner,
html body.onc .RadComboBox .rcbFocused.rcbInner,
html body.onc .RadDropDownList .rddlFocused,
html body.onc .RadDropDownList.rddlFocused .rddlInner,
html body.onc .RadAutoCompleteBox.racFocused .racTokenList {
    border-color: var(--onc-cyan) !important;
    box-shadow: var(--onc-focus);
}
html body.onc .RadComboBox .rcbActionButton,
html body.onc .RadDropDownList .rddlIcon {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--onc-muted);
}
html body.onc .RadComboBox .rcbDisabled .rcbInner,
html body.onc .RadDropDownList.rddlDisabled .rddlInner { background: var(--onc-gray-100) !important; color: var(--onc-muted) !important; }
html body.onc .RadAutoCompleteBox .racToken {
    background: var(--onc-blue-50) !important;
    background-image: none !important;
    border: 1px solid #c9dcf0 !important;
    border-radius: 999px;
    color: var(--onc-navy) !important;
    padding: 1px 6px 1px 10px;
}

/* Listas desplegables */
html body.onc .RadComboBoxDropDown,
html body.onc .RadDropDownListDropDown,
html body.onc .racDropDown,
html body.onc .RadAutoCompleteBoxPopup {
    background: #fff !important;
    border: 1px solid var(--onc-gray-100) !important;
    border-radius: var(--onc-radius-sm);
    box-shadow: var(--onc-shadow-lg) !important;
    overflow: hidden;
    color: var(--onc-ink);
}
html body.onc .RadComboBoxDropDown .rcbItem,
html body.onc .RadComboBoxDropDown .rcbHovered,
html body.onc .RadDropDownListDropDown .rddlItem,
html body.onc .RadDropDownListDropDown .rddlItemHovered,
html body.onc .racDropDown .racItem,
html body.onc .racDropDown .racHovered {
    padding: 6px 10px;
    border: 0 !important;
    border-radius: 0;
    background-image: none !important;
    color: var(--onc-ink) !important;
}
html body.onc .RadComboBoxDropDown .rcbHovered,
html body.onc .RadDropDownListDropDown .rddlItemHovered,
html body.onc .racDropDown .racHovered { background: var(--onc-cyan-50) !important; color: var(--onc-navy) !important; }
html body.onc .RadComboBoxDropDown .rcbItem.rcbSelected,
html body.onc .RadComboBoxDropDown .rcbSelected,
html body.onc .RadDropDownListDropDown .rddlItemSelected {
    background: var(--onc-blue-50) !important;
    color: var(--onc-navy) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--onc-cyan);
}
html body.onc .RadComboBoxDropDown .rcbHeader,
html body.onc .RadComboBoxDropDown .rcbFooter {
    background: var(--onc-gray-50) !important;
    background-image: none !important;
    border-color: var(--onc-gray-100) !important;
    color: var(--onc-navy);
    font-weight: 700;
    padding: 6px 10px;
}
html body.onc .RadComboBoxDropDown .rcbMoreResults { background: var(--onc-gray-50) !important; border-color: var(--onc-gray-100) !important; }

/* =====================================================================
   RadGrid / RadTreeList
   ===================================================================== */
html body.onc .RadGrid,
html body.onc .RadTreeList {
    background: #fff;
    border: 1px solid var(--onc-gray-100) !important;
    border-radius: var(--onc-radius);
    box-shadow: var(--onc-shadow);
    overflow-x: auto;   /* grids mas anchos que la pantalla se desplazan dentro de la tarjeta */
    overflow-y: hidden;
    max-width: 100%;
    color: var(--onc-text);
    font-size: 13px;
}
html body.onc .RadGrid .rgMasterTable,
html body.onc .RadGrid .rgDetailTable,
html body.onc .RadTreeList .rtlTable { border-collapse: separate; border-spacing: 0; }
html body.onc .RadGrid .rgDetailTable { border: 1px solid var(--onc-gray-100); border-radius: var(--onc-radius-sm); }

/* Encabezado */
html body.onc .RadGrid .rgHeaderWrapper,
html body.onc .RadGrid .rgHeaderDiv,
html body.onc .RadGrid thead,
html body.onc .RadTreeList .rtlHeader { background: var(--onc-navy) !important; }
html body.onc .RadGrid .rgHeader,
html body.onc .RadGrid th.rgResizeCol,
html body.onc .RadGrid .rgMultiHeaderRow th,
html body.onc .RadTreeList .rtlHeader th {
    background: var(--onc-navy) !important;
    background-image: none !important;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .02em;
    padding: 10px 12px;
    text-shadow: none;
}
html body.onc .RadGrid .rgHeader:first-child,
html body.onc .RadTreeList .rtlHeader th:first-child { border-left: 0 !important; }
html body.onc .RadGrid .rgHeader a,
html body.onc .RadGrid .rgHeader a:link,
html body.onc .RadGrid .rgHeader a:visited,
html body.onc .RadTreeList .rtlHeader a { color: #fff !important; text-decoration: none; }
html body.onc .RadGrid .rgHeader a:hover { color: var(--onc-cyan) !important; }
html body.onc .RadGrid .rgHeader.rgSorted,
html body.onc .RadGrid th.rgSorted { background: var(--onc-blue) !important; }
html body.onc .RadGrid .rgHeader .rgSortAsc,
html body.onc .RadGrid .rgHeader .rgSortDesc,
html body.onc .RadGrid .rgHeader .rgFilter,
html body.onc .RadGrid .rgHeader .rgOptions { color: var(--onc-cyan) !important; }

/* Filas */
html body.onc .RadGrid .rgRow > td,
html body.onc .RadGrid .rgAltRow > td,
html body.onc .RadGrid .rgEditRow > td,
html body.onc .RadTreeList .rtlR > td,
html body.onc .RadTreeList .rtlA > td {
    border: 0 !important;
    border-top: 1px solid var(--onc-gray-100) !important;
    padding: 8px 12px;
    color: var(--onc-text);
}
html body.onc .RadGrid .rgRow,
html body.onc .RadGrid .rgRow > td,
html body.onc .RadTreeList .rtlR > td { background: #fff !important; }
html body.onc .RadGrid .rgAltRow,
html body.onc .RadGrid .rgAltRow > td,
html body.onc .RadTreeList .rtlA > td { background: var(--onc-gray-50) !important; }
html body.onc .RadGrid .rgRow.rgHoveredRow > td,
html body.onc .RadGrid .rgAltRow.rgHoveredRow > td,
html body.onc .RadGrid .rgHoveredRow > td,
html body.onc .RadTreeList .rtlRHover > td,
html body.onc .RadTreeList .rtlAHover > td { background: var(--onc-cyan-50) !important; background-image: none !important; }
html body.onc .RadGrid .rgSelectedRow > td,
html body.onc .RadGrid .rgRow.rgSelectedRow > td,
html body.onc .RadGrid .rgAltRow.rgSelectedRow > td,
html body.onc .RadGrid .rgSelectedCell,
html body.onc .RadTreeList .rtlSelected > td {
    background: var(--onc-blue-50) !important;
    background-image: none !important;
    color: var(--onc-navy) !important;
}
html body.onc .RadGrid .rgSelectedRow > td:first-child { box-shadow: inset 3px 0 0 var(--onc-cyan); }
html body.onc .RadGrid .rgRow a, html body.onc .RadGrid .rgAltRow a { color: var(--onc-blue); }
html body.onc .RadGrid .rgNoRecords > td { padding: 24px 12px; color: var(--onc-muted); text-align: center; background: #fff !important; }

/* Edicion en linea / formulario de edicion */
html body.onc .RadGrid .rgEditRow > td,
html body.onc .RadGrid .rgEditForm,
html body.onc .RadGrid .rgEditForm > table { background: var(--onc-gray-50) !important; }
html body.onc .RadGrid .rgEditForm { border-top: 1px solid var(--onc-gray-100) !important; padding: 8px; }

/* FormTemplate con RadPageLayout dentro del grid (popup o en linea):
   ONC_Styles.css fija min-width:300px en LayoutColumn_Control / LayoutRow_Titulo, lo que
   desborda las columnas angostas (Span=3) y enciman los controles. Aqui cada columna
   respeta su ancho y deja una separacion entre controles. */
html body.onc .RadGrid .t-container { background: var(--onc-gray-50); color: var(--onc-text); }
html body.onc .RadGrid .t-container :where(div.t-row.LayoutRow_Titulo, div.t-row.LayoutRow_Control, div.t-col.LayoutColumn_Control, div.t-col.LayoutColumn_Titulo) {
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
    text-align: left;
}
html body.onc .RadGrid .t-container > .t-row > .t-col { padding-left: 8px !important; padding-right: 8px !important; margin-bottom: 4px; box-sizing: border-box; }
html body.onc .RadGrid .t-container div.t-row.LayoutRow_Titulo .RadLabel {
    color: var(--onc-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 0 3px;
    background: transparent !important;
}
/* Filas anidadas (titulo y control) sin el margen negativo de Telerik: titulo y control al mismo borde */
html body.onc .RadGrid .t-container .t-col > .t-row { margin-left: 0 !important; margin-right: 0 !important; }
/* Fila control + validador: el control ocupa el espacio y el "*" queda pegado a su derecha */
html body.onc .RadGrid .t-container div.t-row:has(> div.t-col.LayoutColumn_Validador) { display: flex !important; flex-wrap: nowrap; align-items: center; margin: 0 !important; }
html body.onc .RadGrid .t-container div.t-row:has(> div.t-col.LayoutColumn_Validador) > div.t-col.LayoutColumn_Control { flex: 1 1 auto; width: auto !important; padding: 0 !important; }
html body.onc .RadGrid .t-container div.t-col.LayoutColumn_Control > :where(.RadInput, .RadComboBox, .RadDropDownList, .RadAutoCompleteBox, .RadPicker) { width: 100% !important; max-width: 100%; box-sizing: border-box; }
/* Botones del FormTemplate (Cancelar / Grabar) */
html body.onc .RadGrid div:has(> .RadButton.rbImageButton) {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 !important;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 23px 10px;
    border-top: 1px solid var(--onc-gray-100);
}
/* Los iconos Cancel.gif / Update.gif se sustituyen por botones con texto del diseno */
html body.onc .RadGrid .RadButton.rbImageButton:is([style*="Cancel.gif" i], [style*="Update.gif" i]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: auto !important;
    min-width: 120px;
    height: auto !important;
    min-height: var(--onc-control-h);
    margin: 0 !important;
    padding: 6px 18px !important;
    border: 1px solid var(--onc-navy) !important;
    border-radius: 8px;
    background-image: none !important;
    font-family: var(--onc-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--onc-shadow-sm);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
html body.onc .RadGrid .RadButton.rbImageButton[style*="Update.gif" i] { background-color: var(--onc-navy) !important; color: #fff !important; }
html body.onc .RadGrid .RadButton.rbImageButton[style*="Update.gif" i]::after { content: "\2714\00a0 Grabar"; }
html body.onc .RadGrid .RadButton.rbImageButton[style*="Update.gif" i]:hover { background-color: var(--onc-blue) !important; border-color: var(--onc-blue) !important; box-shadow: 0 0 0 3px rgba(0, 200, 215, .25); opacity: 1; }
html body.onc .RadGrid .RadButton.rbImageButton[style*="Cancel.gif" i] { background-color: #fff !important; border-color: var(--onc-gray-200) !important; color: var(--onc-navy) !important; }
html body.onc .RadGrid .RadButton.rbImageButton[style*="Cancel.gif" i]::after { content: "\2716\00a0 Cancelar"; }
html body.onc .RadGrid .RadButton.rbImageButton[style*="Cancel.gif" i]:hover { background-color: var(--onc-cyan-50) !important; border-color: var(--onc-cyan) !important; opacity: 1; }
html body.onc .RadGrid .RadButton.rbImageButton:focus-visible { outline: none; box-shadow: var(--onc-focus); }

/* Barra de comandos, fila de filtro, agrupacion, pie */
html body.onc .RadGrid .rgCommandRow,
html body.onc .RadGrid .rgCommandRow > td,
html body.onc .RadGrid .rgCommandCell {
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--onc-gray-100) !important;
    color: var(--onc-navy);
    padding: 8px 12px;
}
html body.onc .RadGrid .rgCommandRow a { color: var(--onc-blue) !important; font-weight: 600; }
html body.onc .RadGrid .rgFilterRow > td {
    background: var(--onc-gray-50) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--onc-gray-100) !important;
    padding: 6px 8px;
}
html body.onc .RadGrid .rgFilterBox {
    border: 1px solid var(--onc-gray-200) !important;
    border-radius: var(--onc-radius-sm);
    padding: 4px 8px;
    min-height: 28px;
    box-sizing: border-box;
    background: #fff !important;
}
html body.onc .RadGrid .rgFilterBox:focus { border-color: var(--onc-cyan) !important; box-shadow: var(--onc-focus); outline: none; }
html body.onc .RadGrid .rgGroupPanel,
html body.onc .RadGrid .rgGroupPanel td { background: var(--onc-gray-50) !important; background-image: none !important; border-color: var(--onc-gray-100) !important; }
html body.onc .RadGrid .rgGroupHeader > td,
html body.onc .RadGrid .rgGroupHeader {
    background: var(--onc-gray-100) !important;
    background-image: none !important;
    color: var(--onc-navy) !important;
    font-weight: 700;
    border-color: var(--onc-gray-200) !important;
}
html body.onc .RadGrid .rgFooterWrapper,
html body.onc .RadGrid .rgFooterDiv { background: var(--onc-gray-100) !important; background-image: none !important; border: 0 !important; padding: 0 !important; }
html body.onc .RadGrid .rgFooterDiv table { border: 0 !important; }
html body.onc .RadGrid .rgFooter > td,
html body.onc .RadTreeList .rtlF > td {
    background: var(--onc-gray-100) !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 2px solid var(--onc-navy) !important;
    color: var(--onc-navy) !important;
    font-weight: 700;
    padding: 8px 12px;
}

/* Paginador */
html body.onc .RadGrid .rgPager,
html body.onc .RadGrid .rgPager > td,
html body.onc .RadTreeList .rtlPager > td {
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid var(--onc-gray-100) !important;
    color: var(--onc-muted);
    padding: 8px 12px;
}
html body.onc .RadGrid .rgPager .rgNumPart a,
html body.onc .RadTreeList .rtlPager .rgNumPart a {
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    padding: 0 6px;
    margin: 0 2px;
    border: 1px solid transparent !important;
    border-radius: var(--onc-radius-sm);
    background: transparent !important;
    background-image: none !important;
    color: var(--onc-text) !important;
    text-align: center;
    box-sizing: border-box;
    display: inline-block;
}
html body.onc .RadGrid .rgPager .rgNumPart a:hover { background: var(--onc-gray-50) !important; border-color: var(--onc-gray-200) !important; }
html body.onc .RadGrid .rgPager .rgNumPart a.rgCurrentPage,
html body.onc .RadTreeList .rtlPager .rgNumPart a.rgCurrentPage {
    background: var(--onc-navy) !important;
    border-color: var(--onc-navy) !important;
    color: #fff !important;
    font-weight: 700;
}
html body.onc .RadGrid .rgPager :where(.rgPageFirst, .rgPagePrev, .rgPageNext, .rgPageLast) {
    border-radius: var(--onc-radius-sm);
    color: var(--onc-navy) !important;
}

/* Iconos de comando dentro de filas (editar, borrar, expandir) */
html body.onc .RadGrid :where(.rgEdit, .rgDel, .rgExpand, .rgCollapse, .rgUpdate, .rgCancel, .rgAdd, .rgRefresh, .rgExpXLS, .rgExpPDF, .rgExpCSV, .rgExpWord) {
    color: var(--onc-blue) !important;
    border-radius: var(--onc-radius-sm);
}
html body.onc .RadGrid :where(.rgEdit, .rgExpand, .rgCollapse, .rgUpdate, .rgAdd, .rgRefresh):hover { background-color: var(--onc-cyan-50) !important; }
html body.onc .RadGrid .rgDel { color: var(--onc-danger) !important; }

/* Grid responsivo dentro del layout fluido */
html body.onc .RadGrid .rgDataDiv { background: #fff; }

/* =====================================================================
   RadTabStrip + RadMultiPage
   ===================================================================== */
html body.onc .RadTabStrip,
html body.onc .RadTabStrip .rtsLevel1 { background: transparent !important; background-image: none !important; border: 0 !important; }
html body.onc .RadTabStrip .rtsLevel1 { border-bottom: 2px solid var(--onc-gray-100) !important; }
html body.onc .RadTabStrip .rtsLevel1 .rtsUL { display: flex; flex-wrap: wrap; gap: 2px; }
html body.onc .RadTabStrip .rtsLevel1 .rtsLI { background: transparent !important; background-image: none !important; border: 0 !important; margin-bottom: -2px; }
html body.onc .RadTabStrip .rtsLevel1 .rtsLink,
html body.onc .RadTabStrip .rtsLevel1 .rtsLink .rtsOut,
html body.onc .RadTabStrip .rtsLevel1 .rtsLink .rtsIn,
html body.onc .RadTabStrip .rtsLevel1 .rtsTxt {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--onc-muted) !important;
    font-weight: 600;
    font-size: 14px;
}
html body.onc .RadTabStrip .rtsLevel1 .rtsLink {
    padding: 10px 16px;
    border-bottom: 2px solid transparent !important;
    border-radius: var(--onc-radius-sm) var(--onc-radius-sm) 0 0;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
html body.onc .RadTabStrip .rtsLevel1 .rtsLink:hover,
html body.onc .RadTabStrip .rtsLevel1 .rtsLink.rtsHovered { background-color: var(--onc-gray-50) !important; color: var(--onc-navy) !important; }
html body.onc .RadTabStrip .rtsLevel1 .rtsLink:hover :where(.rtsOut, .rtsIn, .rtsTxt) { color: var(--onc-navy) !important; }
html body.onc .RadTabStrip .rtsLevel1 .rtsSelected,
html body.onc .RadTabStrip .rtsLevel1 .rtsLI .rtsSelected,
html body.onc .RadTabStrip .rtsLevel1 .rtsSelected:hover { border-bottom-color: var(--onc-cyan) !important; background: #fff !important; }
html body.onc .RadTabStrip .rtsLevel1 .rtsSelected,
html body.onc .RadTabStrip .rtsLevel1 .rtsSelected :where(.rtsOut, .rtsIn, .rtsTxt) { color: var(--onc-navy) !important; }
html body.onc .RadTabStrip .rtsLevel1 .rtsDisabled :where(.rtsOut, .rtsIn, .rtsTxt) { color: var(--onc-gray-300) !important; }
html body.onc .RadMultiPage .rmpView,
html body.onc .RadMultiPage > div { text-align: left; }

/* =====================================================================
   RadMenu (menu principal en el encabezado)
   Funciona en RenderMode Lightweight y Classic.
   ===================================================================== */
html body.onc .onc-nav .RadMenu,
html body.onc .onc-nav .RadMenu .rmRootGroup,
html body.onc .onc-nav .RadMenu .rmHorizontal {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem,
html body.onc .onc-nav .RadMenu .rmHorizontal > .rmItem {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0;
}
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem > .rmLink,
html body.onc .onc-nav .RadMenu .rmHorizontal > .rmItem > .rmLink {
    display: flex;
    align-items: center;
    height: auto;
    padding: 12px 14px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: none !important;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem > .rmLink :where(.rmText, .rmToggle, span) {
    background-image: none !important;
    color: inherit !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit;
}
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem > .rmLink:hover,
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem > .rmLink.rmFocused,
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem > .rmLink.rmExpanded,
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem.rmFocused > .rmLink,
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem.rmExpanded > .rmLink,
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem > .rmLink.rmSelected,
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem.rmSelected > .rmLink {
    color: #fff !important;
    background: rgba(255, 255, 255, .06) !important;
    border-bottom-color: var(--onc-cyan) !important;
}
/* Flecha de submenu */
html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem > .rmLink .rmToggle { margin-left: .35rem; opacity: .7; }

/* Submenus (popup). En Lightweight viven en .RadMenuPopup fuera del menu. */
html body.onc .RadMenu .rmSlide .rmGroup,
html body.onc .RadMenuPopup .rmGroup,
html body.onc .RadMenu .rmSlide .rmVertical {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--onc-gray-100) !important;
    border-radius: var(--onc-radius-sm);
    box-shadow: var(--onc-shadow-lg) !important;
    padding: 6px 0 !important;
    min-width: 220px;
}
/* Submenus con hijos: espacio para la flecha, sin caja de color */
html body.onc .RadMenu .rmSlide .rmGroup .rmLink.rmExpand,
html body.onc .RadMenuPopup .rmGroup .rmLink.rmExpand { padding-right: 32px !important; }
html body.onc .RadMenu .rmSlide .rmGroup .rmToggle,
html body.onc .RadMenuPopup .rmGroup .rmToggle { background: transparent !important; border-color: transparent !important; }
/* Columna de iconos (gutter) que algunos skins dibujan con ::before */
html body.onc .RadMenu .rmSlide .rmGroup::before,
html body.onc .RadMenuPopup .rmGroup::before { display: none !important; }
html body.onc .RadMenu .rmSlide .rmGroup .rmItem,
html body.onc .RadMenuPopup .rmGroup .rmItem {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
}
html body.onc .RadMenu .rmSlide .rmGroup .rmLink,
html body.onc .RadMenuPopup .rmGroup .rmLink {
    display: flex !important;
    align-items: center;
    height: auto;
    padding: 8px 16px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-left: 3px solid transparent !important;
    border-radius: 0;
    color: var(--onc-ink) !important;
    font-size: 13.5px !important;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
html body.onc .RadMenu .rmSlide .rmGroup .rmLink :where(.rmText, span),
html body.onc .RadMenuPopup .rmGroup .rmLink :where(.rmText, span) {
    background-image: none !important;
    color: inherit !important;
    padding: 0 !important;
    font-size: inherit !important;
}
html body.onc .RadMenu .rmSlide .rmGroup .rmLink:hover,
html body.onc .RadMenu .rmSlide .rmGroup .rmLink.rmFocused,
html body.onc .RadMenu .rmSlide .rmGroup .rmLink.rmExpanded,
html body.onc .RadMenuPopup .rmGroup .rmLink:hover,
html body.onc .RadMenuPopup .rmGroup .rmLink.rmFocused,
html body.onc .RadMenuPopup .rmGroup .rmLink.rmExpanded,
html body.onc .RadMenuPopup .rmGroup .rmItem.rmFocused > .rmLink {
    background: var(--onc-cyan-50) !important;
    border-left-color: var(--onc-cyan) !important;
    color: var(--onc-navy) !important;
}
html body.onc .RadMenu .rmSlide .rmGroup .rmSeparator,
html body.onc .RadMenuPopup .rmGroup .rmSeparator { border-top: 1px solid var(--onc-gray-100) !important; margin: 4px 0; background: none !important; }

/* Menu en movil (Lightweight con ShowToggleHandle / Mobile) */
html body.onc .onc-nav .RadMenu .rmToggleHandle,
html body.onc .onc-nav .RadMenu_Mobile .rmRootToggle { color: #fff !important; border-color: rgba(255, 255, 255, .3) !important; }
html body.onc .RadMenu_Mobile .rmRootGroup,
html body.onc .RadMenu_Mobile .rmGroup { background: var(--onc-navy-900) !important; }
html body.onc .RadMenu_Mobile .rmLink { color: #fff !important; border-color: rgba(255, 255, 255, .08) !important; }

/* =====================================================================
   RadPanelBar
   ===================================================================== */
html body.onc .RadPanelBar {
    background: #fff !important;
    border: 1px solid var(--onc-gray-100) !important;
    border-radius: var(--onc-radius);
    box-shadow: var(--onc-shadow-sm);
    overflow: hidden;
}
html body.onc .RadPanelBar .rpRootGroup > .rpItem > .rpLink,
html body.onc .RadPanelBar .rpRootGroup > .rpItem > .rpHeaderTemplate {
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--onc-gray-100) !important;
    color: var(--onc-navy) !important;
    font-weight: 700;
    padding: 10px 14px;
}
html body.onc .RadPanelBar .rpRootGroup > .rpItem > .rpLink:hover { background: var(--onc-gray-50) !important; }
html body.onc .RadPanelBar .rpRootGroup > .rpItem > .rpLink.rpExpanded,
html body.onc .RadPanelBar .rpRootGroup > .rpItem > .rpLink.rpSelected { background: var(--onc-navy) !important; color: #fff !important; }
html body.onc .RadPanelBar .rpRootGroup > .rpItem > .rpLink :where(.rpOut, .rpText) { background-image: none !important; color: inherit !important; }
html body.onc .RadPanelBar .rpGroup { background: #fff !important; border: 0 !important; }
html body.onc .RadPanelBar .rpGroup .rpLink { background: transparent !important; color: var(--onc-ink) !important; border: 0 !important; }
html body.onc .RadPanelBar .rpGroup .rpLink:hover,
html body.onc .RadPanelBar .rpGroup .rpLink.rpSelected { background: var(--onc-cyan-50) !important; color: var(--onc-navy) !important; }

/* =====================================================================
   RadWindow / RadWindowManager (alert, confirm, prompt) / RadNotification
   ===================================================================== */
html body.onc .RadWindow,
html body.onc .RadWindow.rwNormalWindow {
    border: 0 !important;
    border-radius: var(--onc-radius);
    box-shadow: var(--onc-shadow-lg) !important;
    overflow: hidden;
    background: #fff !important;
}
html body.onc .RadWindow .rwTitleBar,
html body.onc .RadWindow .rwTitlebarControls,
html body.onc .RadWindow .rwTitleRow,
html body.onc .RadWindow .rwTitleRow td,
html body.onc .RadWindow table .rwTopLeft,
html body.onc .RadWindow table .rwTopRight,
html body.onc .RadWindow table .rwTitlebar {
    background: var(--onc-navy) !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
}
html body.onc .RadWindow .rwTitleBar { padding: 8px 12px; }
html body.onc .RadWindow .rwTitle,
html body.onc .RadWindow .rwTitleWrapper .rwTitle,
html body.onc .RadWindow .rwTitleRow em {
    color: #fff !important;
    font-family: var(--onc-font);
    font-size: 14px !important;
    font-weight: 600 !important;
    font-style: normal;
}
html body.onc .RadWindow .rwCommands .rwCommandButton,
html body.onc .RadWindow .rwCommandButton { color: rgba(255, 255, 255, .8) !important; border-radius: var(--onc-radius-sm); }
html body.onc .RadWindow .rwCommandButton:hover { color: #fff !important; background-color: rgba(255, 255, 255, .12) !important; }
html body.onc .RadWindow .rwContent,
html body.onc .RadWindow .rwWindowContent,
html body.onc .RadWindow table .rwBodyLeft,
html body.onc .RadWindow table .rwBodyRight,
html body.onc .RadWindow table .rwFooterLeft,
html body.onc .RadWindow table .rwFooterCenter,
html body.onc .RadWindow table .rwFooterRight,
html body.onc .RadWindow table .rwStatusbarRow td { background: #fff !important; background-image: none !important; border-color: var(--onc-gray-100) !important; }
html body.onc .RadWindow .rwDialogPopup,
html body.onc .RadWindow .rwDialog { color: var(--onc-text); font-size: 14px; padding: 16px; }
html body.onc .RadWindow .rwDialogText,
html body.onc .RadWindow .rwDialogMessage { color: var(--onc-text); font-size: 14px; line-height: 1.5; }
html body.onc .RadWindow .rwDialogButtons,
html body.onc .RadWindow .rwPopupButtons { padding-top: 12px; display: flex; gap: .5rem; justify-content: flex-end; }
html body.onc .RadWindow .rwPopupButton,
html body.onc .RadWindow .rwDialogButtons .RadButton,
html body.onc .RadWindow .rwDialogButtons button {
    background: var(--onc-navy) !important;
    background-image: none !important;
    border: 1px solid var(--onc-navy) !important;
    border-radius: 8px;
    color: #fff !important;
    font-weight: 600;
    padding: 6px 18px;
    min-width: 90px;
    height: auto;
}
html body.onc .RadWindow .rwPopupButton .rwOuterSpan,
html body.onc .RadWindow .rwPopupButton .rwInnerSpan { background: none !important; color: inherit !important; padding: 0; }
html body.onc .RadWindow .rwPopupButton + .rwPopupButton,
html body.onc .RadWindow .rwDialogButtons .RadButton + .RadButton,
html body.onc .RadWindow .rwDialogButtons button + button {
    background: #fff !important;
    border-color: var(--onc-gray-200) !important;
    color: var(--onc-navy) !important;
}
/* Capa modal */
html body.onc .TelerikModalOverlay { background: var(--onc-navy-900) !important; opacity: .45 !important; }

html body.onc .RadNotification {
    border: 0 !important;
    border-radius: var(--onc-radius);
    box-shadow: var(--onc-shadow-lg) !important;
    background: #fff !important;
    overflow: hidden;
}
html body.onc .RadNotification .rnTitleBar {
    background: var(--onc-navy) !important;
    background-image: none !important;
    border: 0 !important;
    color: #fff !important;
    padding: 8px 12px;
}
html body.onc .RadNotification .rnTitleBar :where(.rnTitleBarTitle, em, span) { color: #fff !important; font-weight: 600; font-style: normal; }
html body.onc .RadNotification .rnContentWrapper,
html body.onc .RadNotification .rnContent { background: #fff !important; color: var(--onc-text) !important; padding: 12px 14px; }
html body.onc .RadNotification .rnCommands a { color: rgba(255, 255, 255, .8) !important; }

/* =====================================================================
   RadAjaxLoadingPanel
   ===================================================================== */
html body.onc .RadAjax .raColor,
html body.onc .RadAjax .raTransp { background-color: rgba(245, 248, 251, .75) !important; }
html body.onc .RadAjax .raDiv,
html body.onc .RadAjax .raDiv::before {
    background-image: none !important;
}
html body.onc .RadAjax .raDiv {
    position: relative;
}
html body.onc .RadAjax .raDiv::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    border: 3px solid var(--onc-gray-100);
    border-top-color: var(--onc-cyan);
    border-right-color: var(--onc-navy);
    animation: onc-spin .8s linear infinite;
}
@keyframes onc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html body.onc .RadAjax .raDiv::after { animation-duration: 2.4s; } }

/* =====================================================================
   RadAsyncUpload / RadColorPicker / RadToolTip / RadImageEditor
   ===================================================================== */
html body.onc .RadUpload .ruFileWrap .ruButton,
html body.onc .RadUpload .ruButton,
html body.onc .RadAsyncUpload .ruButton {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--onc-gray-200) !important;
    border-radius: var(--onc-radius-sm);
    color: var(--onc-navy) !important;
    font-weight: 600;
    height: auto;
    min-height: 30px;
    padding: 4px 14px;
}
html body.onc .RadUpload .ruButton:hover { border-color: var(--onc-cyan) !important; background: var(--onc-cyan-50) !important; }
html body.onc .RadUpload .ruFakeInput { border: 1px solid var(--onc-gray-200) !important; border-radius: var(--onc-radius-sm); min-height: 30px; box-sizing: border-box; }
html body.onc .RadUpload .ruUploadProgress { color: var(--onc-text); }
html body.onc .RadUpload .ruUploadSuccess { color: var(--onc-success); }
html body.onc .RadUpload .ruUploadFailure { color: var(--onc-danger); }

html body.onc .RadToolTip,
html body.onc .RadToolTip .rtContent {
    background: var(--onc-navy-900) !important;
    border: 0 !important;
    border-radius: var(--onc-radius-sm);
    color: #fff !important;
    box-shadow: var(--onc-shadow-lg);
}

html body.onc .RadImageEditor { border: 1px solid var(--onc-gray-100) !important; border-radius: var(--onc-radius); overflow: hidden; }
html body.onc .RadImageEditor .reToolBar,
html body.onc .RadImageEditor .reToolbar { background: var(--onc-gray-50) !important; background-image: none !important; border-color: var(--onc-gray-100) !important; }

/* RadLabel: hereda la tipografia; el color lo decide la pagina */
html body.onc .RadLabel { font-family: var(--onc-font); }

/* =====================================================================
   Telerik Reporting (HTML5 ReportViewer)
   ===================================================================== */
html body.onc .trv-report-viewer { border-radius: var(--onc-radius); overflow: hidden; border: 1px solid var(--onc-gray-100); box-shadow: var(--onc-shadow); }
html body.onc .trv-report-viewer .k-toolbar { background: var(--onc-gray-50); border-color: var(--onc-gray-100); }

/* =====================================================================
   Transicion: paleta anterior escrita inline en las paginas.
   Mapea los estilos heredados a la nueva identidad sin tocar cada .aspx.
   Al migrar una pagina, sustituir el inline por las clases onc-*.
   ===================================================================== */
/* Barras de titulo de seccion (antes fondo #CBDBEF) -> usar class="onc-seccion" */
html body.onc .onc-seccion,
html body.onc div[style*="#CBDBEF" i],
html body.onc td[style*="#CBDBEF" i] {
    background: transparent !important;
    color: var(--onc-navy) !important;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--onc-gray-100);
    box-shadow: inset 0 -2px 0 0 transparent;
    padding: 6px 0 6px 0 !important;
    position: relative;
}
html body.onc .onc-seccion::after,
html body.onc div[style*="#CBDBEF" i]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 48px;
    height: 2px;
    background: var(--onc-cyan);
}
html body.onc div[style*="#CBDBEF" i]:empty { padding: 0 !important; height: 0; }

/* Banda Comprobante / Folio / Fecha de las capturas (antes #657C9E) */
html body.onc div.t-row.Row_FolioFecha,
html body.onc table[style*="#657C9E" i] {
    background:
        radial-gradient(500px 120px at 95% -40%, rgba(0, 200, 215, .25), transparent 60%),
        linear-gradient(135deg, var(--onc-navy) 0%, var(--onc-blue) 100%) !important;
    border-radius: var(--onc-radius);
    box-shadow: var(--onc-shadow);
    padding: 10px 14px !important;
    margin-bottom: 16px;
}
html body.onc div.t-row.Row_FolioFecha .RadLabel,
html body.onc table[style*="#657C9E" i] .RadLabel { color: rgba(255, 255, 255, .8) !important; font-size: .72rem !important; letter-spacing: .08em; text-transform: uppercase; }
/* Controles dentro de la banda: fondo blanco, igual que el selector de fecha */
html body.onc div.t-row.Row_FolioFecha .RadInput .riTextBox,
html body.onc div.t-row.Row_FolioFecha .RadComboBox .rcbInner,
html body.onc table[style*="#657C9E" i] .RadInput .riTextBox {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--onc-navy) !important;
    font-weight: 700;
}

/* Titulos grises de Configuracion (antes #B1BCCD / #8496B0) */
html body.onc span[style*="#B1BCCD" i] { color: var(--onc-navy) !important; }
html body.onc span[style*="#8496B0" i] { color: var(--onc-muted) !important; }

/* Titulos de pantalla (antes ForeColor="Silver" 20pt) */
html body.onc span[style*="color:Silver" i] {
    color: var(--onc-navy) !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
}

/* Botones con icono: el icono se posiciona a la izquierda, se reserva su espacio */
html body.onc .RadButton.rbButton.rbIconButton { padding-left: 30px; padding-right: 10px; font-size: 13px; white-space: nowrap; }
html body.onc .RadButton.rbButton.rbIconButton .rbText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.onc .RadButton.rbButton.rbIconButton .rbPrimaryIcon { left: 10px !important; top: 50% !important; margin-top: -8px; }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 900px) {
    html body.onc .onc-header__bar { padding: 12px 16px; }
    html body.onc .onc-header__logo { height: 36px; }
    html body.onc .onc-header__empresa { order: 3; width: 100%; align-items: flex-start; text-align: left; margin-left: 0; }
    html body.onc .onc-header__empresa .RadLabel, html body.onc .onc-header__empresa .RadLabel * { max-width: 90vw; }
    html body.onc .onc-header__acciones { margin-left: auto; }
    html body.onc .onc-main { padding: 16px 12px 40px; }
    html body.onc .onc-nav .RadMenu .rmRootGroup > .rmItem > .rmLink { padding: 10px 10px !important; }
}
@media (max-width: 600px) {
    html body.onc.onc-login .onc-main { padding-top: 24px; }
    html body.onc .onc-login-card { padding: 24px 20px 20px; }
    html body.onc .onc-footer__inner { flex-direction: column; gap: .25rem; }
    html body.onc .onc-footer__sep { display: none; }
}
@media (max-width: 700px) {
    html body.onc .rgFilterRow { display: none !important; }
}

/* =====================================================================
   Ajustes esteticos: alineacion y tamanos
   ===================================================================== */
/* Etiquetas de formulario (RadPageLayout): seminegrita, sin ocupar mas de una linea extra */
html body.onc .onc-main div.t-row.LayoutRow_Titulo .RadLabel,
html body.onc .onc-main div.t-col.LayoutColumn_Titulo .RadLabel {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--onc-text) !important;
    line-height: 1.3;
    padding-top: 10px;
    padding-bottom: 3px;
}
/* La banda Folio / Fecha conserva sus etiquetas claras */
html body.onc .onc-main div.t-row.Row_FolioFecha div.t-row.LayoutRow_Titulo .RadLabel,
html body.onc .onc-main div.t-row.Row_FolioFecha .RadLabel,
html body.onc .onc-main table[style*="#657C9E" i] .RadLabel { color: rgba(255, 255, 255, .8) !important; font-size: .72rem !important; padding-top: 0; }

/* Controles de una columna de captura alineados al mismo borde izquierdo */
html body.onc .onc-main div.t-col.LayoutColumn_Control > :where(.RadInput, .RadComboBox, .RadDropDownList, .RadAutoCompleteBox, .RadPicker) { vertical-align: top; }

/* Tarjeta de login: los campos alinean con el titulo (sin canaletas de RadPageLayout) */
html body.onc .onc-login-card .t-container { padding-left: 0 !important; padding-right: 0 !important; }
html body.onc .onc-login-card .t-row { margin-left: 0 !important; margin-right: 0 !important; }

/* Encabezados de grid: texto centrado vertical y sin cortes de palabra raros */
html body.onc .RadGrid .rgHeader { vertical-align: middle; line-height: 1.25; word-break: normal; hyphens: auto; }
/* Columnas numericas del pie alineadas a la derecha como las celdas */
html body.onc .RadGrid .rgFooter > td { white-space: nowrap; }

/* Titulos de seccion con el mismo aire arriba y abajo */
html body.onc .onc-seccion,
html body.onc div[style*="#CBDBEF" i] { margin-top: 20px !important; margin-bottom: 10px !important; }

/* Titulo de pantalla (antes Silver 20pt) alineado a la izquierda del contenido */
html body.onc .onc-main > div > span[style*="color:Silver" i],
html body.onc .onc-main span[style*="color:Silver" i] { display: block; text-align: left; margin: 4px 0 14px; }
html body.onc.onc-pago span[style*="color:Silver" i],
html body.onc.onc-login span[style*="color:Silver" i] { text-align: center; }

/* Botones de una misma fila con la misma altura */
html body.onc .RadButton.rbButton { vertical-align: middle; }
/* =====================================================================
   Responsivo / movil (Telerik RenderMode="Auto")
   - En telefonos Telerik sirve el render Mobile de RadGrid y RadMenu (hamburguesa).
   - En tabletas y ventanas angostas (render Lightweight) se evita el desborde.
   ===================================================================== */
/* ONC_Styles.css fija html { min-width: 400px }: provoca scroll horizontal en telefonos */
html:has(body.onc) { min-width: 0 !important; }
html body.onc { overflow-x: hidden; }

/* Areas tactiles de 40px en pantallas tactiles (recomendacion de Telerik / Microsoft) */
@media (pointer: coarse) {
    :root { --onc-control-h: 40px; }
    html body.onc .RadInput .riTextBox,
    html body.onc .RadComboBox .rcbInner,
    html body.onc .RadDropDownList .rddlInner { font-size: 16px; } /* evita el zoom automatico de iOS */
}

/* Menu: en escritorio angosto los elementos raiz bajan de linea en vez de cortarse */
html body.onc .onc-nav .RadMenu:not(.RadMenu_Mobile) .rmRootGroup { display: flex; flex-wrap: wrap; }

/* Menu Mobile (hamburguesa) dentro de la barra del encabezado */
html body.onc .onc-nav .RadMenu_Mobile,
html body.onc .onc-nav .RadMenu.rmMobile { background: transparent !important; border: 0 !important; width: 100% !important; }
html body.onc .onc-nav .RadMenu_Mobile .rmRootToggle,
html body.onc .onc-nav .RadMenu_Mobile .rmToggle,
html body.onc .onc-nav .RadMenu_Mobile .rmRootLink { color: #fff !important; background: transparent !important; border-color: rgba(255, 255, 255, .25) !important; }
html body.onc .RadMenu_Mobile .rmRootGroup,
html body.onc .RadMenu_Mobile .rmGroup,
html body.onc .RadMenu_Mobile .rmSlide,
html body.onc .RadMenu_Mobile .rmItem { background: var(--onc-navy-900) !important; background-image: none !important; border-color: rgba(255, 255, 255, .08) !important; }
html body.onc .RadMenu_Mobile .rmLink,
html body.onc .RadMenu_Mobile .rmText { color: #fff !important; font-size: 15px !important; min-height: 44px; display: flex; align-items: center; }
html body.onc .RadMenu_Mobile .rmLink:hover,
html body.onc .RadMenu_Mobile .rmSelected > .rmLink,
html body.onc .RadMenu_Mobile .rmFocused { background: rgba(255, 255, 255, .06) !important; box-shadow: inset 3px 0 0 var(--onc-cyan); }

/* Boton hamburguesa del render Mobile (la lista se abre en un .RadMenuPopup) */
html body.onc .onc-nav .RadMenu .rmRootToggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 4px 0;
    background: transparent !important; background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .25) !important; border-radius: 8px;
    color: #fff !important; box-shadow: none !important;
}
html body.onc .onc-nav .RadMenu .rmRootToggle::before { color: #fff !important; }
html body.onc .onc-nav .RadMenu .rmRootToggle:hover { border-color: var(--onc-cyan) !important; background: rgba(255, 255, 255, .06) !important; }
html body.onc .RadMenuPopup .rmRootGroup { min-width: 260px; }
html body.onc .RadMenuPopup .rmRootGroup .rmLink { min-height: 44px; }

/* Grid Mobile: encabezado y paginador con la paleta de marca */
html body.onc .RadGrid.rgMobile,
html body.onc .RadGrid_Mobile { border-radius: var(--onc-radius); }

@media (max-width: 767px) {
    /* Encabezado compacto */
    html body.onc .onc-header__bar { gap: .5rem 1rem; padding: 10px 14px; }
    html body.onc .onc-header__logo { height: 32px; }
    html body.onc .onc-header__eyebrow { display: none; }
    html body.onc .onc-header__empresa .RadLabel,
    html body.onc .onc-header__empresa .RadLabel *,
    html body.onc .onc-header__empresa .onc-header__empresa-nombre { font-size: .9rem !important; max-width: 92vw; }
    html body.onc .onc-folios { padding: 2px 10px; }
    html body.onc .onc-folios__label { font-size: .62rem; }
    html body.onc .onc-folios__valor { font-size: 1.05rem !important; }
    html body.onc .onc-nav__inner { padding: 0 6px; }
    html body.onc .onc-nav .RadMenu:not(.RadMenu_Mobile) .rmRootGroup > .rmItem > .rmLink { padding: 10px 9px !important; font-size: 13px !important; }

    /* Contenido */
    html body.onc .onc-main { padding: 14px 10px 32px; }
    html body.onc h1 { font-size: 1.3rem; }
    html body.onc span[style*="color:Silver" i] { font-size: 1.25rem !important; }

    /* Controles con ancho fijo en px: nunca mas anchos que la pantalla */
    html body.onc :where(.RadInput, .RadComboBox, .RadDropDownList, .RadAutoCompleteBox, .RadPicker, .RadButton, .RadUpload, .RadAsyncUpload) { max-width: 100% !important; }
    html body.onc .RadPicker { width: 100% !important; }
    html body.onc .RadPicker table { width: 100% !important; }

    /* Sin canaletas de RadPageLayout: sus margenes negativos sacaban las filas de la pantalla */
    html body.onc .onc-main .t-container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100%; }
    html body.onc .onc-main .t-row { margin-left: 0 !important; margin-right: 0 !important; }
    html body.onc .onc-main .t-col { padding-left: 0 !important; padding-right: 0 !important; }
    html body.onc .onc-main :where(.RadLabel, .RadInput, .RadComboBox, .RadAutoCompleteBox, .RadDropDownList) { box-sizing: border-box; }

    /* Botones a todo lo ancho en telefono: area tactil grande y sin texto recortado */
    html body.onc .onc-main .RadButton.rbButton:not(.rbLinkButton):not(.rbImageButton):not(.RadCheckBox):not(.RadRadioButton),
    html body.onc .onc-main .RadButton.rbSkinnedButton { width: 100% !important; min-height: 44px; }
    html body.onc .onc-main .RadButton.rbButton .rbText { white-space: normal !important; overflow: visible !important; }
    html body.onc .onc-main table:not([class]) > tbody > tr > td:has(> .RadButton) { flex: 1 1 100%; }

    /* Columnas con boton: separacion entre botones de una misma fila */
    html body.onc .onc-main .t-col:has(.RadButton.rbButton, .RadButton.rbSkinnedButton) { padding: 4px !important; }

    /* RadPageLayout: etiqueta arriba, control abajo, sin anchos minimos */
    html body.onc div.t-col.LayoutColumn_Titulo,
    html body.onc div.t-col.LayoutColumn_Control,
    html body.onc div.t-col.Column_Control,
    html body.onc div.t-row.LayoutRow_Titulo,
    html body.onc div.t-row.LayoutRow_Control { min-width: 0 !important; max-width: none !important; text-align: left !important; }
    html body.onc div.t-col.LayoutColumn_Titulo { padding: 6px 0 2px !important; }
    html body.onc div.t-col.LayoutColumn_Control { padding: 0 0 6px !important; }

    /* Etiqueta y control al mismo borde; el control usa todo el ancho de la fila */
    html body.onc .onc-main div.t-row.LayoutRow_Titulo,
    html body.onc .onc-main div.t-row.LayoutRow_Control { padding-left: 0 !important; padding-right: 0 !important; }
    html body.onc .onc-main div.t-row:not(.onc-login-card div.t-row):has(> div.t-col.LayoutColumn_Validador) { display: flex !important; flex-wrap: nowrap; align-items: flex-start; }
    html body.onc .onc-main div.t-row:not(.onc-login-card div.t-row):has(> div.t-col.LayoutColumn_Validador) > div.t-col.LayoutColumn_Control { flex: 1 1 auto; width: auto !important; }
    html body.onc .onc-main div.t-col.LayoutColumn_Control > :where(.RadInput, .RadComboBox, .RadDropDownList, .RadAutoCompleteBox, .RadPicker) { width: 100% !important; }

    /* Tablas de captura (TablaControl) apiladas */
    html body.onc table.TablaControl { width: 100% !important; min-width: 0 !important; display: table; }
    html body.onc :where(td.ControlColumnaTitulo, td.ControlColumnaControl, td.ControlColumnaControlSmall) { display: block; width: auto !important; min-width: 0 !important; max-width: none !important; }

    /* Tablas de acomodo sin clase que contienen botones: sus celdas bajan de linea.
       No afecta tablas dentro de controles Telerik. */
    html body.onc .onc-main table:not([class]):has(> tbody > tr > td > .RadButton):not(:is(.RadGrid, .RadTreeList, .RadCalendar, .RadPicker, .RadInput, .RadComboBox, .RadEditor, .RadUpload, .RadAsyncUpload, .RadWindow, .RadMenu) table) { width: 100% !important; max-width: 100%; }
    html body.onc .onc-main table:not([class]):has(> tbody > tr > td > .RadButton):not(:is(.RadGrid, .RadTreeList, .RadCalendar, .RadPicker, .RadInput, .RadComboBox, .RadEditor, .RadUpload, .RadAsyncUpload, .RadWindow, .RadMenu) table) > tbody > tr { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
    html body.onc .onc-main table:not([class]):has(> tbody > tr > td > .RadButton):not(:is(.RadGrid, .RadTreeList, .RadCalendar, .RadPicker, .RadInput, .RadComboBox, .RadEditor, .RadUpload, .RadAsyncUpload, .RadWindow, .RadMenu) table) > tbody > tr > td { width: auto !important; max-width: 100%; margin: 0 !important; }

    /* Grids en render Lightweight (tabletas): desplazamiento horizontal dentro de la tarjeta */
    html body.onc .RadGrid:not(.rgMobile),
    html body.onc .RadTreeList { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
    html body.onc .RadGrid .rgPager .rgWrap { float: none; display: inline-block; margin: 2px 0; }

    /* Formulario de edicion del grid en telefono: un control por fila, etiquetas visibles
       y el popup fijo al ancho de la pantalla (fuera del scroll horizontal del grid).
       Con UseStaticHeaders Telerik pinta el formulario de insercion dentro del <thead>,
       que mide lo que todas las columnas: el contenido se limita al ancho visible del grid
       (unidades cqw) y queda fijo a la izquierda mientras el encabezado se desplaza. */
    html body.onc .RadGrid { container-type: inline-size; }
    html body.onc .RadGrid tr:has(.t-container),
    html body.onc .RadGrid tr:has(.t-container) > td {
        background: var(--onc-gray-50) !important;
        background-image: none !important;
        border: 0 !important;
        padding: 0 !important;
    }
    html body.onc .RadGrid tr:has(.t-container) > td > div {
        position: sticky;
        left: 0;
        width: calc(100vw - 24px) !important;
        width: calc(100cqw - 2px) !important;
        max-width: calc(100cqw - 2px) !important;
        box-sizing: border-box;
        background: var(--onc-gray-50);
    }
    html body.onc .RadGrid .rgEditPopup {
        position: fixed !important;
        top: 8px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 3000 !important;
        background: var(--onc-gray-50) !important;
        box-sizing: border-box;
    }
    html body.onc .RadGrid :where(.RadAjaxPanel, .t-container):has(.LayoutRow_Titulo) { width: 100% !important; box-sizing: border-box; }
    html body.onc .RadGrid .RadAjaxPanel :where(div):has(> .t-container) { border-width: 4px !important; }
    html body.onc .RadGrid .t-container { padding-left: 4px !important; padding-right: 4px !important; }
    html body.onc .RadGrid .t-container > .t-row { display: flex !important; flex-wrap: wrap !important; }
    html body.onc .RadGrid .t-container > .t-row > .t-col {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    html body.onc .RadGrid .t-container div.t-row.LayoutRow_Titulo .RadLabel { display: block; color: var(--onc-text) !important; }
    html body.onc .RadGrid div:has(> .RadButton.rbImageButton) {
        display: flex;
        flex-wrap: nowrap;
        justify-content: stretch;
        gap: 10px;
        padding: 12px 8px 12px !important;
        background: var(--onc-gray-50);
        border-top: 1px solid var(--onc-gray-100);
    }
    html body.onc .RadGrid .RadButton.rbImageButton:is([style*="Cancel.gif" i], [style*="Update.gif" i]) { flex: 1 1 0; min-width: 0; min-height: 44px; }

    /* Listas de RadComboBox con DropDownWidth fijo (p. ej. 625px): al ancho de la pantalla,
       sin quedar cortadas por la izquierda */
    html body.onc .rcbSlide { left: 8px !important; right: auto !important; max-width: calc(100vw - 16px) !important; }
    html body.onc .RadComboBoxDropDown {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box;
    }
    html body.onc .RadComboBoxDropDown :where(.rcbScroll, .rcbHeader, .rcbFooter, .rcbMoreResults) { width: auto !important; max-width: 100%; box-sizing: border-box; }
    html body.onc .RadComboBoxDropDown .rcbScroll { overflow-x: hidden !important; }
    html body.onc .RadComboBoxDropDown :where(.rcbItem, .rcbHovered) { white-space: normal; word-break: break-word; }

    /* Ventanas emergentes al ancho de la pantalla */
    html body.onc .RadWindow { max-width: calc(100vw - 16px) !important; }
    html body.onc .RadNotification { max-width: calc(100vw - 16px) !important; }

    /* Banda Folio / Fecha en telefono: etiqueta arriba a la izquierda y control a todo lo ancho */
    html body.onc div.t-row.Row_FolioFecha div.t-col { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 100% !important; text-align: left !important; }
    html body.onc div.t-row.Row_FolioFecha div.t-col.Column_FolioFecha_Titulo { padding: 6px 0 2px !important; }
    html body.onc div.t-row.Row_FolioFecha :where(.RadInput, .RadPicker, .RadComboBox) { width: 100% !important; }
    html body.onc div.t-row.Row_FolioFecha .RadInput .riTextBox { font-size: 14px !important; }

    /* Banda Folio / Fecha de las capturas */
    html body.onc div.t-row.Row_FolioFecha { padding: 8px 10px !important; }

    /* Paginas de pago (Styles_OpenPay.css fija 400px de ancho) */
    html body.onc.onc-pago :where(.SmallPage, .Smallcontainer) { min-width: 0 !important; width: auto !important; max-width: 100% !important; box-sizing: border-box; }

    /* Pie */
    html body.onc .onc-footer { padding: 12px 10px; font-size: .74rem; }
}