/* =========================================================
   estilos.css (UI kit reusable)
   Basado en tu site-consolidado actual :contentReference[oaicite:1]{index=1}
   ========================================================= */

/* =========================
   0) Fonts (1 sola vez)
   ========================= */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Baloo&display=swap");

/* =========================
   1) Tokens
   ========================= */
:root {
    --font-sans: Roboto, sans-serif;
    --c-primary: #4B5DC1;
    --c-primary-700: #4d5fb1;
    --c-ink: #13233D;
    --c-text: #23324d;
    --c-white: #ffffff;
    --c-bg: #F5F6FD;
    --c-danger: #ff0000;
    --c-success: #03B200;
    --radius-sm: 10px;
    --radius-md: 18px;
    --shadow-md: 0px 2px 4px #00000062;
    --shadow-lg: 0 18px 50px rgba(0,0,0,0.20);
    --container-md: 1000px;
    --container-lg: 1250px;
}

/* =========================
   2) Reset/Base
   ========================= */
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--c-text);
}

/* Fondo corporativo reusable (aplícalo donde quieras) */
.u-bg-corporate {
    background-color: var(--c-bg);
    background-image: url(/Content/Images/BackGroundLogin.png);
    background-size: 50%;
    background-position: bottom right;
    background-repeat: no-repeat;
}

/* =========================
   3) Utilidades (reusables)
   ========================= */
.u-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.u-text-center {
    text-align: center;
}

.u-w-100 {
    width: 100%;
}

.u-mt-0 {
    margin-top: 0;
}

.u-mt-1 {
    margin-top: 6px;
}

.u-mt-2 {
    margin-top: 12px;
}

.u-mt-3 {
    margin-top: 18px;
}

.u-mb-1 {
    margin-bottom: 6px;
}

.u-mb-2 {
    margin-bottom: 12px;
}

.u-mb-3 {
    margin-bottom: 18px;
}

.u-pt-1 {
    padding-top: 6px;
}

.u-pt-2 {
    padding-top: 10px;
}

.u-pt-3 {
    padding-top: 18px;
}

.u-theme-primary {
    background: var(--c-primary);
    color: #fff;
}

.u-surface {
    background: var(--c-white);
}

/* =========================
   4) Layout (contenedores / grillas)
   ========================= */
.c-container {
    width: 100%;
    margin: 0 auto;
    padding: 18px;
    box-sizing: border-box;
}

.c-container--md {
    max-width: var(--container-md);
    padding-left: 12px;
    padding-right: 12px;
}

.c-container--lg {
    max-width: var(--container-lg);
}

.c-grid {
    display: grid;
    gap: 20px;
}

.c-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width:768px) {
    .c-grid--2 {
        grid-template-columns: 1fr;
    }
}

/* =========================
   5) Componentes
   ========================= */

/* Card */
.c-card {
    background: var(--c-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.c-card__body {
    padding: 16px 20px 20px;
}

.c-card__title {
    color: var(--c-primary);
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 18px 0;
    text-align: center;
}

.c-card--lgRadius {
    border-radius: var(--radius-md);
}

.c-card--shadowLg {
    box-shadow: var(--shadow-lg);
}

/* Button */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border-radius: 0.5rem 0.5rem 0.5rem 0px;
    font-family: var(--font-sans);
    font-size: 1rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid transparent;
    transition: .25s;
    user-select: none;
}

.c-btn--outline-primary {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

    .c-btn--outline-primary:hover {
        background: var(--c-primary-700);
        color: #fff;
        border-color: var(--c-primary-700);
    }

.c-btn--outline-inverse {
    border-color: #fff;
    color: #fff;
    font-weight: 600;
}

    .c-btn--outline-inverse:hover {
        background: #fff;
        color: #475fb9;
    }

.c-btn--solid-primary {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}

    .c-btn--solid-primary:hover {
        background: #fff;
        color: var(--c-primary);
        border-color: var(--c-primary);
    }

.c-btn--block {
    display: flex;
    width: 100%;
}

/* Inputs */
.c-field {
    width: 100%;
    box-sizing: border-box;
}

.c-input, .c-textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    color: #4d5fb1;
    background: #fff;
    border: 1px solid #d1d1d1;
    display: block;
    padding: 12px 18px;
}

.c-input {
    border-radius: 50px;
    line-height: 22px;
}

.c-textarea {
    border-radius: 30px;
    line-height: 22px;
    resize: vertical;
    min-height: 160px;
}

.c-label {
    display: block;
    margin: 12px 0 6px;
    font-weight: 500;
    letter-spacing: .2px;
}

/* Alerts/Messages */
.c-msg {
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    display: block;
}

.c-msg--error {
    color: var(--c-danger);
}

.c-msg--ok {
    color: var(--c-success);
}

/* “Split card” reusable (izq contenido / der imagen) */
.c-split {
    display: flex;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    min-height: 0;
}

.c-split__left {
    flex: 0 0 58%;
    padding: 26px;
}

.c-split__right {
    flex: 0 0 42%;
    min-height: 520px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--split-bg-image, none);
}

@media (max-width:768px) {
    .c-split {
        flex-direction: column;
    }

    .c-split__right {
        display: none;
    }

    .c-split__left {
        padding: 18px 16px 16px;
    }
}

/* “Hero card” reusable */
.c-hero {
    display: flex;
    gap: 18px;
    align-items: stretch;
    padding-bottom: 15px;
}

.c-hero__media {
    flex: 0 0 44%;
    display: block;
}

.c-hero__img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.19), 0 6px 20px 0 rgba(0,0,0,.19);
}

.c-hero__content {
    color: inherit;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.c-hero__title {
    line-height: 1.2;
    margin: 0 0 10px 0;
    color: #4d5fb1;
}

.c-hero__content p {
    margin: 10px 0;
    color: #4d5fb1;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
}

.c-hero__actions {
    margin-top: 12px;
}

@media (max-width:768px) {
    .c-hero {
        flex-direction: column;
    }

    .c-hero__img {
        min-height: 200px;
    }
}

/* =========================
   6) Vendor overrides (Infragistics)
   Reusable: aplica a cualquier wrapper con .c-ig
   ========================= */
.c-ig,
.c-ig .ig_WebDataGrid {
    width: 100% !important;
    border: 0 !important;
    overflow: hidden;
}

    .c-ig table {
        width: 100% !important;
        border-collapse: collapse;
    }

    .c-ig .ig_GridArea,
    .c-ig .ig_GridContainer {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .c-ig .ig_GridHeader,
    .c-ig .ig_GridHeaderCaption,
    .c-ig th {
        background: var(--c-ink);
        color: #fff;
        font-weight: 800;
        border: 0;
    }

    .c-ig .ig_GridCell,
    .c-ig td {
        padding: 10px 12px;
        border-top: 1px solid #edf2ff;
        vertical-align: middle;
    }

    .c-ig .ig_GridRowHover,
    .c-ig tr:hover {
        background: #eef2ff;
    }

/* =========================
   7) Compat layer (NO rompe lo existente)
   Puedes ir migrando markup poco a poco.
   ========================= */

/* Cards */
.card {
    background: var(--c-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* Botones legacy */
.btnOpcion {
    text-align: center;
    background-color: transparent;
    font-family: var(--font-sans);
    font-size: 1rem;
    text-decoration: none;
    transition: .3s;
    border-radius: 0.5rem 0.5rem 0.5rem 0px;
}

.btnOpcion--primary {
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
    font-weight: 400;
    padding: 0.5rem 2.75rem;
}

    .btnOpcion--primary:hover {
        background-color: var(--c-primary-700);
        color: #fff;
        cursor: pointer;
    }

.btnOpcion--inverse {
    color: #fff;
    border: 1px solid #fff;
    font-weight: 600;
    padding: 0.5rem 2.75rem;
    display: inline-block;
    transition: .25s;
}

    .btnOpcion--inverse:hover {
        background: #fff;
        color: #475fb9;
        cursor: pointer;
    }

.btnVolverEstadoColor {
    background-color: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: #fff !important;
}

    .btnVolverEstadoColor:hover {
        background: #fff !important;
        color: var(--c-primary) !important;
        border-color: var(--c-primary) !important;
    }

/* Inputs legacy */
.CampoTxt {
    border-radius: 50px !important;
}

.CampoMensaje {
    border-radius: 30px !important;
}

.CampoTxt, .CampoMensaje {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    color: #4d5fb1;
    background: #fff;
    border: 1px solid #d1d1d1;
    display: block;
    padding: 12px 18px;
}

.CampoMensaje {
    resize: vertical;
    min-height: 160px;
}

/* Mensajes legacy */
.msgError, .msgOk {
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    display: block;
}

.msgError {
    color: var(--c-danger);
}

.msgOk {
    color: var(--c-success);
}

/* Helpers legacy */
.u-pt-10 {
    padding-top: 10px;
}

.u-pt-4 {
    padding-top: 4px;
}

/* Text legacy */
.TxtDescription, .DescriptionText {
    color: var(--c-ink) !important;
}

.TxtDescription h6.txt-mini {
    font-size: 12px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Grid/hero legacy (mapeo a nuevos conceptos) */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

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

.col-item {
    background: #fff;
    border-radius: var(--radius-sm);
    margin: 10px;
    box-shadow: var(--shadow-md);
    color: #4d5fb1;
    box-sizing: border-box;
    padding-bottom: 15px;
}

/* Iguana: para páginas existentes que todavía usan .rxl-ig */
.rxl-ig {
}

    .rxl-ig, .rxl-ig .ig_WebDataGrid {
        width: 100% !important;
        border: 0 !important;
        overflow: hidden;
    }
/* =========================
   Legacy overrides (gana contra StilosNew.css)
   ========================= */

.bodyofta.img_background {
    background-image: url(/Content/Images/BackGroundLogin.png) !important;
    background-color: #F5F6FD !important;
    background-size: 50% !important;
    background-position: bottom right !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important; /* pon fixed si lo quieres fijo */
}
/* =========================
   UI Kit Hotfixes (2026-02)
   ========================= */

/* 1) Modal reusable (opt-in)
   Úsalo agregando la clase "ui-modal" al contenedor .modal
   (para no romper modales de Bootstrap existentes) */
.modal.ui-modal .modal-content {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal.ui-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.modal.ui-modal .modal-body {
    padding: 20px; /* <-- este es el padding que estás echando de menos */
}

.modal.ui-modal .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(0,0,0,.06);
}

/* 2) Split-card: tema SOLO en el panel izquierdo (NO en body) */
.c-split__left {
    background: var(--split-left-bg, transparent);
    color: var(--split-left-color, inherit);
}

/* Cuando el panel izquierdo sea azul corporativo */
.c-split--primary-left {
    --split-left-bg: var(--c-primary);
    --split-left-color: #fff;
}

    /* Labels blancos SOLO dentro del panel azul */
    .c-split--primary-left .c-label {
        color: #fff;
    }

    /* Mensajes error dentro de panel azul */
    .c-split--primary-left .c-msg--error {
        color: #ffd1d1; /* visible sobre azul */
    }

/* Evita que el título global se vuelva blanco por herencia */
.c-pageTitle {
    color: var(--c-primary);
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 18px 0;
}

@media (max-width:768px) {
    .c-pageTitle {
        font-size: 22px;
    }
}
/* =========================
   DEFAULT hero cards - legacy spacing restore
   (igualar look & feel pre-consolidación)
   ========================= */

/* El card debe tener aire interno (legacy lo tenía) */
.c-card.c-hero {
    padding: 18px 18px 20px; /* <-- recupera el “espacio” dentro del card */
}

/* El contenedor del contenido (derecha) necesita padding propio
   para separar del borde y de la imagen */
.c-hero__content {
    padding: 6px 10px 6px 6px;
}

/* Espaciado vertical entre textos (legacy era más “respirable”) */
.c-hero__title {
    margin: 0 0 8px 0;
}

.c-hero__content p {
    margin: 10px 0;
    line-height: 1.55;
}

/* Botón con más separación (legacy se veía más suelto) */
.c-hero__actions {
    margin-top: 14px;
}

/* En mobile, evita que se vea apretado */
@media (max-width:768px) {
    .c-card.c-hero {
        padding: 16px 14px 18px;
    }

    .c-hero__content {
        padding: 8px 6px 0 6px;
    }
}

/* =========================
   Login (legacy width restore)
   Objetivo: card ~600px y campos "largos" como antes
   ========================= */

.page-login .card,
.page-login .c-card,
.page-login .login-card {
    width: 600px; /* <-- legacy */
    max-width: 600px; /* evita que algún max-width lo achique */
    min-width: 600px; /* evita shrink por flex/grid */
    margin-left: auto;
    margin-right: auto;
}

/* Si tu layout está en mobile, permite bajar */
@media (max-width: 700px) {
    .page-login .card,
    .page-login .c-card,
    .page-login .login-card {
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        min-width: 0;
    }
}

/* Campos y botón: que ocupen el "ancho legacy" dentro del card */
.page-login input[type="text"],
.page-login input[type="password"],
.page-login input[type="email"],
.page-login .CampoTxt,
.page-login .CampoMensaje,
.page-login .c-input {
    width: 100%;
    max-width: 520px; /* <-- el look legacy (más largo) */
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.page-login .btnOpcion,
.page-login .c-btn,
.page-login button,
.page-login input[type="submit"] {
    width: 100%;
    max-width: 520px; /* mismo ancho que inputs */
    margin-left: auto;
    margin-right: auto;
    display: block;
}
/* =========================
   Page: Login (legacy width)
   ========================= */

.page-login {
    width: 100%;
}

    /* card con ancho legacy */
    .page-login .login-card {
        width: 600px;
        max-width: 600px;
        min-width: 600px;
        padding: 20px;
        text-align: center;
        margin: 0 auto;
    }

        /* inputs y botones con ancho legacy dentro del card */
        .page-login .login-card .txt_rut_p,
        .page-login .login-card .btn_agenda_nuevos,
        .page-login .login-card .c-btn {
            width: 100%;
            max-width: 520px;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

        /* separación consistente */
        .page-login .login-card .btn_agenda_nuevos,
        .page-login .login-card .c-btn {
            margin-top: 14px;
        }

    .page-login .login-linkwrap {
        text-align: center;
    }

/* responsive */
@media (max-width: 700px) {
    .page-login .login-card {
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        min-width: 0;
    }
}
/* =========================
   Page: Login (legacy look)
   ========================= */

.page-login .login-shell {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.page-login .login-title--legacy {
    text-align: center;
    font-size: 44px;
    font-weight: 700;
    color: var(--c-primary, #4B5DC1);
    margin: 18px 0 12px;
}

.page-login hr {
    max-width: 900px;
    margin: 0 auto 22px;
    opacity: .35;
}

.page-login .login-card {
    width: 600px;
    max-width: 600px;
    min-width: 600px;
    padding: 26px 22px;
    text-align: center;
    margin: 0 auto 18px;
}

.page-login .u-spacer {
    height: 14px;
}

.page-login .login-card .txt_rut_p {
    width: 100%;
    max-width: 520px;
    margin: 10px auto 6px;
    display: block;
}

.page-login .login-card .TxtDescription {
    display: block;
    margin: 0 auto 14px;
}

    .page-login .login-card .TxtDescription h6 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #111;
    }

.page-login .login-card .login-btn,
.page-login .login-card .btn_agenda_nuevos,
.page-login .login-card .c-btn {
    width: 100%;
    max-width: 520px;
    margin: 18px auto 0;
    display: block;
}

.page-login .login-linkwrap {
    margin-top: 14px;
    text-align: center;
}

@media (max-width: 700px) {
    .page-login .login-title--legacy {
        font-size: 32px;
    }

    .page-login .login-card {
        width: calc(100% - 32px);
        max-width: calc(100% - 32px);
        min-width: 0;
        padding: 22px 16px;
    }
}
/* =========================
   Page: Login (legacy size)
   ========================= */

.page-login .login-shell {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
}

.page-login .login-title--legacy {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    color: #4B5DC1;
    margin: 12px 0 10px;
    line-height: 1.15;
}

.page-login hr {
    max-width: 860px;
    margin: 0 auto 18px;
    opacity: .35;
}

.page-login .login-card {
    width: 600px;
    max-width: 600px;
    min-width: 600px;
    padding: 20px 20px;
    margin: 0 auto 14px;
}

.page-login .u-spacer {
    height: 10px;
}

.page-login .login-card .txt_rut_p {
    width: 100%;
    max-width: 520px;
    margin: 8px auto 4px;
    display: block;
}

.page-login .login-card .TxtDescription {
    display: block;
    margin: 0 auto 10px;
}

    .page-login .login-card .TxtDescription h6 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #111;
    }

.page-login .login-card .login-btn,
.page-login .login-card .btn_agenda_nuevos,
.page-login .login-card .c-btn {
    width: 100%;
    max-width: 520px;
    margin: 14px auto 0;
    display: block;
}

.page-login .login-linkwrap {
    margin-top: 10px;
    text-align: center;
}

@media (max-width: 700px) {
    .page-login .login-title--legacy {
        font-size: 30px;
    }

    .page-login .login-card {
        width: calc(100% - 28px);
        max-width: calc(100% - 28px);
        min-width: 0;
        padding: 18px 14px;
    }
}
/* =========================
   Ficha Clínica - Punto 2 (scoped)
   Solo checkboxes + layout 1 línea + "Otros" más bajo
   ========================= */

.c-split--primary-left .p2-wrap {
    max-width: 520px;
    margin-top: 6px;
    display: grid;
    row-gap: 10px;
}

.c-split--primary-left .p2-row {
    display: grid;
    grid-template-columns: 1fr 22px;
    column-gap: 12px;
    align-items: center;
    min-width: 0;
}

.c-split--primary-left .p2-text {
    color: var(--c-white);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.c-split--primary-left .p2-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .c-split--primary-left .p2-checkbox label {
        display: none !important;
    }

    .c-split--primary-left .p2-checkbox input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid var(--c-white);
        border-radius: 3px;
        background: transparent;
        cursor: pointer;
        position: relative;
        margin: 0;
    }

        .c-split--primary-left .p2-checkbox input[type="checkbox"]:checked {
            background: var(--c-white);
        }

            .c-split--primary-left .p2-checkbox input[type="checkbox"]:checked::after {
                content: "";
                position: absolute;
                left: 5px;
                top: 1px;
                width: 5px;
                height: 10px;
                border: solid var(--c-primary);
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }

        .c-split--primary-left .p2-checkbox input[type="checkbox"]:focus {
            outline: 2px solid rgba(255,255,255,0.65);
            outline-offset: 2px;
        }

.c-split--primary-left .p2-otros {
    min-height: 90px !important;
    height: 90px !important;
    resize: vertical;
}
.c-split--primary-left .p2-wrap {
    row-gap: 16px;
}

.c-split--primary-left .p2-row {
    grid-template-columns: 1fr 26px;
}

.c-split--primary-left .p2-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    border-width: 2px;
}
    .c-split--primary-left .p2-checkbox input[type="checkbox"]:checked::after {
        left: 7px;
        top: 2px;
        width: 5px;
        height: 11px;
    }
.c-split--primary-left .p2-otros {
    min-height: 45px !important;
    height: 45px !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

.login-links-row {
    display: flex;
    align-items: center;
    justify-content: center; /* opcional, para que queden centrados */
    gap: 32px; /* <-- más separados (prueba 24/32/40) */
    flex-wrap: wrap;
}

.login-link {
    display: inline-block;
}
/* Login links: uno debajo del otro (como la 2da imagen) */
.page-login .login-links-row {
    display: flex;
    flex-direction: column;
    align-items: center; /* centrados */
    justify-content: flex-start;
    gap: 14px; /* separación vertical (ajusta 10/14/18) */
    flex-wrap: nowrap;
}

.page-login .login-links-row .login-link {
    display: block; /* fuerza “cada uno en su línea” */
}
/* LOGIN: links uno debajo del otro (forzado) */
.page-login .login-links-row {
    display: block !important; /* mata el flex */
    text-align: center; /* para que queden centrados */
}

.page-login .login-links-row .login-link,
.page-login .login-links-row a { /* por si el LinkButton renderiza <a> */
    display: block !important; /* cada uno ocupa su propia línea */
    margin-top: 12px; /* separación vertical */
}

.page-login .login-links-row .login-link:first-child,
.page-login .login-links-row a:first-child {
    margin-top: 0;
}
/* Modal server-side (sin JS) */
.rxl-modal-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 9998;
}

.rxl-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    max-width: calc(100% - 40px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    z-index: 9999;
    overflow: hidden;
}

.rxl-modal-header {
    padding: 14px 16px;
    background: #2f3b52;
    color: #fff;
    font-weight: 700;
}

.rxl-modal-body {
    padding: 16px;
}

.rxl-modal-footer {
    padding: 14px 16px;
    text-align: right;
    border-top: 1px solid #eef2ff;
}

.share-col {
    text-align: center;
}
/* WdwCompartir: NO forzar width (respeta Width="700px" del control)
   Solo evita que se salga en pantallas pequeñas */
div[id$="WdwCompartir"],
div[id$="WdwCompartir_container"],
div[id$="WdwCompartir_outer"],
div[id$="WdwCompartir_Container"],
div[id$="WdwCompartir_FloatPane"] {
    max-width: calc(100vw - 16px);
}

    /* Contenido interno siempre a 100% */
    div[id$="WdwCompartir"] .rxl-share-modal {
        width: 100% !important;
        max-width: none !important;
    }
/* Contenedor interno del contenido del modal (NO define tamaño fijo) */
.rxl-share-modal {
    width: 100%;
    background: #fff;
    border: 1px solid #dbe3f0;
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(0,0,0,.18);
    padding: 18px;
}

@media (max-width: 768px) {
    .rxl-share-modal {
        padding: 12px;
        border-radius: 10px;
    }
}
/* =========================================================
   WdwCompartir - FIX real de layout IG (ContentArea 404px)
   - Un SOLO tamaño: lo define Width="700px" del control
   - CSS solo fuerza que el contenido use TODO el ancho
   ========================================================= */

/* 1) Quitar header/chrome superior (título + icono/imagen cerrar) */
div[id$="WdwCompartir"] div[id*="obj:header"],
div[id$="WdwCompartir"] .igdw_IGHeaderArea {
    display: none !important;
    height: 0 !important;
}

    div[id$="WdwCompartir"] div[id*="obj:header"] img,
    div[id$="WdwCompartir"] div[id*="obj:header"] input[type="image"] {
        display: none !important;
    }

/* 2) El “angosto” viene de aquí: IG deja el TD de contenido en 404px (inline).
      Le ganamos con !important y colapsamos los edges laterales. */
div[id$="WdwCompartir"] td.igdw_IGBodyContentArea {
    width: 100% !important;
}

div[id$="WdwCompartir"] td.igdw_IGBodyEdgeLeft,
div[id$="WdwCompartir"] td.igdw_IGBodyEdgeRight {
    width: 0 !important;
    padding: 0 !important;
}

/* 3) Asegurar que la tabla contenedora y el modal interno ocupen 100% */
div[id$="WdwCompartir"] table {
    width: 100% !important;
}

div[id$="WdwCompartir"] .rxl-share-modal {
    width: 100% !important;
    max-width: none !important;
}

/* 4) Opcional seguro: que el dialog no se salga en pantallas chicas
      (NO cambia el tamaño en desktop, solo limita en mobile) */
div[id$="WdwCompartir"] {
    max-width: calc(100vw - 16px) !important;
}
/* Separación headers "Seleccionar" y "Examen" en modal compartir */
.rxl-share-window .rxl-hdr-sel {
    padding-right: 18px !important;
    white-space: nowrap;
}

.rxl-share-window .rxl-hdr-exam {
    padding-left: 12px !important;
}
/* Separar headers "Seleccionar" y "Examen" SOLO en el grid del modal */
div[id$="WdwCompartir"] .rxl-grid-compartir th:first-child,
div[id$="WdwCompartir"] .rxl-grid-compartir td:first-child {
    padding-right: 18px !important;
    white-space: nowrap;
}

div[id$="WdwCompartir"] .rxl-grid-compartir th:nth-child(2),
div[id$="WdwCompartir"] .rxl-grid-compartir td:nth-child(2) {
    padding-left: 12px !important;
}
/* columna checkbox */
.rxl-grid-compartir .rxl-grid-check-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* agrandar checkbox */
.rxl-grid-compartir .rxl-grid-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

/* centrar texto del header de la primera columna */
.rxl-grid-compartir th:first-child {
    text-align: center !important;
}

/* centrar contenido de la primera columna */
.rxl-grid-compartir td:first-child {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Grid más compacta */
.wdg-compact .ig_GridCell,
.wdg-compact td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    line-height: 1.15 !important;
    vertical-align: middle !important;
}

/* Header un poco más compacto también */
.wdg-compact .ig_GridHeader,
.wdg-compact .ig_GridHeaderCaption,
.wdg-compact th {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Quita márgenes internos raros */
.wdg-compact table {
    border-collapse: collapse !important;
}

/* Celda del pdf centrada y sin espacio extra */
.wdg-compact td:last-child {
    text-align: center !important;
}

    /* Ícono PDF más pequeño para bajar altura de fila */
    .wdg-compact td:last-child img {
        width: 24px !important;
        height: 24px !important;
        display: inline-block !important;
    }
.wdg-compact .wdg-pdf-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}