:root {
    --naranja: #f37021;
    --naranja-hover: #e45f12;
    --azul: #003b71;
    --gris-borde: #dbe5ef;
    --gris-texto: #52616f;
    --rojo: #ef4444;
}

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #eef3f8;
}

/* ================= POPUP PRINCIPAL ================= */

.popup-pregrado,
.popup-pregrado .dxpc-mainDiv,
.popup-pregrado .dxpc-contentWrapper,
.popup-pregrado .dxpc-content {
    border: none !important;
    outline: none !important;
    overflow: hidden !important;
    border-radius: 34px !important;
}

    .popup-pregrado .dxpc-content {
        padding: 0 !important;
    }

.pregrado-container {
    width: 920px;
    height: 620px;
    display: flex;
    background: #fff;
    border-radius: 34px !important;
    overflow: hidden !important;
    box-shadow: 0 22px 55px rgba(0, 59, 113, .24);
}

/* ================= PANEL IZQUIERDO ================= */

.pregrado-left {
    width: 310px;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--azul);
    flex-shrink: 0;
}

.left-slider {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .55s ease;
}

    .slide-img.active {
        opacity: 1;
    }

/*.left-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(160deg, rgba(0,59,113,.86), rgba(243,112,33,.62));
}*/

.left-content {
    position: relative;
    z-index: 3;
    height: 100%;
    padding: 32px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .left-content h2 {
        font-size: 32px;
        margin: 0 0 12px;
    }

    .left-content p {
        font-size: 15px;
        line-height: 1.5;
        opacity: .95;
    }

.slider-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    cursor: pointer;
}

    .dot.active {
        width: 25px;
        border-radius: 20px;
        background: #fff;
    }

/* ================= PANEL DERECHO ================= */

.pregrado-right {
    flex: 1;
    padding: 16px 26px 22px !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

.right-logo {
    text-align: center;
}

    .right-logo img {
        max-height: 42px;
        margin-bottom: 2px;
    }

.form-title {
    margin: 0 0 9px;
    text-align: center;
    color: var(--naranja);
    font-size: 19px;
    font-weight: 800;
}

/* ================= PAGECONTROL DEVEXPRESS ================= */

.pc-pregrado {
    flex: 1;
    width: 100% !important;
    border: none !important;
}

    .pc-pregrado .dxtc-stripContainer,
    .pc-pregrado .dxtc-wrapper,
    .pc-pregrado .dxtc-content {
        border: none !important;
        background: transparent !important;
    }

    .pc-pregrado .dxtc-stripContainer {
        border: none !important;
        border-bottom: none !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
        background-image: none !important;
        box-shadow: none !important;
    }

        .pc-pregrado .dxtc-strip,
        .pc-pregrado .dxtc-stripContainer table,
        .pc-pregrado .dxtc-stripContainer td,
        .pc-pregrado .dxtc-leftIndent,
        .pc-pregrado .dxtc-rightIndent,
        .pc-pregrado .dxtc-spacer,
        .pc-pregrado .dxtc-lineBreak {
            border: none !important;
            border-bottom: none !important;
            background-image: none !important;
            box-shadow: none !important;
        }

    /* TAB BASE */
    .pc-pregrado .dxtc-tab,
    .pc-pregrado .dxtc-activeTab {
        border: none !important;
        border-radius: 12px !important;
        padding: 8px 13px !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        background-image: none !important;
        box-shadow: none !important;
    }

        /* TAB INACTIVO */
        .pc-pregrado .dxtc-tab,
        .pc-pregrado .dxtc-tab:hover,
        .pc-pregrado .dxtc-tabHover {
            background: #eef3f8 !important;
            color: #52616f !important;
        }

            /* TEXTO TAB INACTIVO */
            .pc-pregrado .dxtc-tab a,
            .pc-pregrado .dxtc-tab span,
            .pc-pregrado .dxtc-tab div,
            .pc-pregrado .dxtc-tabHover a,
            .pc-pregrado .dxtc-tabHover span,
            .pc-pregrado .dxtc-tabHover div {
                background: transparent !important;
                color: #52616f !important;
            }

        /* TAB ACTIVO */
        .pc-pregrado .dxtc-activeTab,
        .pc-pregrado .dxtc-activeTab:hover {
            background: var(--naranja) !important;
            color: #fff !important;
        }

            /* TEXTO TAB ACTIVO */
            .pc-pregrado .dxtc-activeTab a,
            .pc-pregrado .dxtc-activeTab span,
            .pc-pregrado .dxtc-activeTab div {
                background: transparent !important;
                color: #fff !important;
            }

    .pc-pregrado .dxtc-content {
        padding: 0 !important;
        overflow: visible !important;
    }

    .pc-pregrado .dxtc-contentCell {
        padding: 0 !important;
    }

/* ================= FORMULARIO ================= */

.tabs-body {
    flex: 1 !important;
    max-width: 550px !important;
    width: 100% !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

.dxflFormLayout,
.dxflGroup,
.dxflGroupCell,
.dxflItemSys,
.pregrado-right,
.tabs-body {
    border: none !important;
    outline: none !important;
}

.li-modern {
    padding-bottom: 10px !important;
}

.dxflGroupCell {
    padding: 4px 8px !important;
}

/* ================= CAMPOS DEVEXPRESS ================= */

.dx-modern-input,
.dx-modern-input table,
.dx-modern-input .dxeButtonEditSys,
.dx-modern-input .dxeTextBoxSys,
.dx-modern-input .dxeMemoSys {
    width: 100% !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

    .dx-modern-input input,
    .dx-modern-input textarea,
    .dx-modern-input .dxeEditAreaSys,
    .dx-modern-input .dxeMemoEditAreaSys {
        font-size: 13px !important;
        border-radius: 16px !important;
        padding-left: 42px !important;
        background-repeat: no-repeat !important;
        background-position: 14px center !important;
        background-size: 16px !important;
        box-sizing: border-box !important;
        color: #52616f !important;
    }

    .dx-modern-input input,
    .dx-modern-input .dxeEditAreaSys {
        height: 38px !important;
        line-height: 38px !important;
    }

    .dx-modern-input textarea,
    .dx-modern-input textarea.dxeMemoEditAreaSys {
        min-height: 76px !important;
        padding-top: 10px !important;
        background-position: 14px 13px !important;
    }

    .dx-modern-input .dxeButton,
    .dx-modern-input .dxeButtonEditButton,
    .dx-modern-input td.dxeButton {
        border: none !important;
        background: transparent !important;
    }

    /* ================= FOCO ================= */

    .dx-modern-input:focus-within,
    .dx-modern-input:focus-within table,
    .dx-modern-input:focus-within .dxeButtonEditSys,
    .dx-modern-input:focus-within .dxeTextBoxSys,
    .dx-modern-input:focus-within .dxeMemoSys {
        border: 2px solid var(--naranja) !important;
        border-radius: 17px !important;
        box-shadow: 0 0 0 4px rgba(243, 112, 33, .18) !important;
        background: #fff !important;
    }

/* ================= ERROR ================= */

.campo-error,
.campo-error table,
.campo-error .dxeButtonEditSys,
.campo-error .dxeTextBoxSys,
.campo-error .dxeMemoSys,
.campo-error:focus-within,
.campo-error:focus-within table,
.campo-error:focus-within .dxeButtonEditSys,
.campo-error:focus-within .dxeTextBoxSys,
.campo-error:focus-within .dxeMemoSys {
    border: 2px solid var(--rojo) !important;
    border-radius: 17px !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .18) !important;
    background: #fff !important;
}

    .campo-error input,
    .campo-error textarea,
    .campo-error .dxeEditAreaSys,
    .campo-error .dxeMemoEditAreaSys {
        border: none !important;
        background-color: #fff !important;
        color: #52616f !important;
    }

/* ================= COMBO NORMAL PARA MÓVIL ================= */

.combo-devexpress-normal,
.combo-devexpress-normal table,
.combo-devexpress-normal .dxeButtonEditSys {
    width: 100% !important;
    border-radius: 16px !important;
    overflow: visible !important;
}

    .combo-devexpress-normal input,
    .combo-devexpress-normal .dxeEditAreaSys {
        height: 38px !important;
        line-height: 38px !important;
        padding-left: 12px !important;
        font-size: 13px !important;
    }

/* ================= COMBO READONLY ================= */

.combo-readonly-silver,
.combo-readonly-silver table,
.combo-readonly-silver .dxeButtonEditSys {
    background-color: #e5e7eb !important;
    color: #64748b !important;
    cursor: not-allowed !important;
}

    .combo-readonly-silver input,
    .combo-readonly-silver .dxeEditAreaSys {
        background-color: #e5e7eb !important;
        background-repeat: no-repeat !important;
        background-position: 14px center !important;
        background-size: 16px !important;
        color: #64748b !important;
        cursor: not-allowed !important;
    }

    .combo-readonly-silver .dxeButton,
    .combo-readonly-silver .dxeButtonEditButton {
        pointer-events: none !important;
        opacity: .45 !important;
    }

/* ================= ICONOS ================= */

.dx-modern-input.ico-user input,
.dx-modern-input.ico-user .dxeEditAreaSys {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23889AAE' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E") !important;
}

.dx-modern-input.ico-mail input,
.dx-modern-input.ico-mail .dxeEditAreaSys {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23889AAE' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") !important;
}

.dx-modern-input.ico-phone input,
.dx-modern-input.ico-phone .dxeEditAreaSys {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23889AAE' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.2.5 1.2 1.2V20c0 .7-.5 1.2-1.2 1.2C10.8 21.2 2.8 13.2 2.8 3.4 2.8 2.7 3.3 2.2 4 2.2h3.4c.7 0 1.2.5 1.2 1.2 0 1.4.2 2.7.6 4 .1.4 0 .9-.3 1.2l-2.3 2.2z'/%3E%3C/svg%3E") !important;
}

.dx-modern-input.ico-id input,
.dx-modern-input.ico-id .dxeEditAreaSys {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23889AAE' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM8 8c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm4 8H4.5c.7-2 2.6-3 3.5-3s2.8 1 3.5 3H12zm7-1h-5v-2h5v2zm0-4h-6V9h6v2z'/%3E%3C/svg%3E") !important;
}

.dx-modern-input.ico-calendar input,
.dx-modern-input.ico-calendar .dxeEditAreaSys {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23889AAE' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-2V2h-2v2H9V2H7zm12 18H5V9h14v11z'/%3E%3C/svg%3E") !important;
}

.dx-modern-input.ico-address textarea,
.dx-modern-input.ico-address .dxeMemoEditAreaSys,
.dx-modern-input.ico-location input,
.dx-modern-input.ico-location .dxeEditAreaSys {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23889AAE' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.3 7 13 7 13s7-7.7 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5z'/%3E%3C/svg%3E") !important;
}

.dx-modern-input.ico-gender input,
.dx-modern-input.ico-gender .dxeEditAreaSys,
.dx-modern-input.ico-plan input,
.dx-modern-input.ico-plan .dxeEditAreaSys,
.dx-modern-input.ico-relation input,
.dx-modern-input.ico-relation .dxeEditAreaSys,
.dx-modern-input.ico-school input,
.dx-modern-input.ico-school .dxeEditAreaSys {
    background-image: url("data:image/svg+xml,%3Csvg fill='%23889AAE' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.91V17h2V9L12 3zm0 13.18L5.24 12.5 12 8.82l6.76 3.68L12 16.18zM5 14.2v3.3C5 19.43 8.13 21 12 21s7-1.57 7-3.5v-3.3l-7 3.82-7-3.82z'/%3E%3C/svg%3E") !important;
}

/* ================= CAPTCHA ================= */

.captcha-note {
    border: 1px dashed #f3b27c;
    background: #fff8f3;
    border-radius: 14px;
    padding: 12px;
    color: #805032;
    text-align: center;
    font-size: 13px;
}

.popup-captcha-dev .dxpc-content {
    padding: 18px !important;
}

.popup-captcha-dev,
.popup-captcha-dev .dxpc-mainDiv,
.popup-captcha-dev .dxpc-contentWrapper {
    z-index: 99999999 !important;
}

.captcha-dev-wrap {
    text-align: center;
}

.captcha-dev-text {
    font-size: 14px;
    color: #34495e;
    margin-bottom: 12px;
}

.captcha-box-center {
    margin-bottom: 14px;
}

/* ================= BOTONES ================= */

.form-actions {
    margin-top: auto !important;
    padding-top: 12px !important;
    max-width: 550px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
}

.btn-modern {
    background: var(--naranja) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    min-width: 135px !important;
    height: 30px !important;
}

    .btn-modern:hover {
        background: var(--naranja-hover) !important;
    }

.btn-secondary-pre {
    background: #dbe5ef !important;
    border: none !important;
    color: #34495e !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    min-width: 120px !important;
    height: 30px !important;
}

/* ================= TOAST ================= */

.swal2-container {
    z-index: 999999999 !important;
}

.toast-error-custom {
    background: #fff !important;
    border-left: 5px solid #dc2626 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.18) !important;
}

.toast-error-title {
    color: #dc2626 !important;
    font-weight: 700 !important;
}

.toast-ok-custom {
    background: #fff !important;
    border-left: 5px solid #16a34a !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.18) !important;
}

.toast-ok-title {
    color: #16a34a !important;
    font-weight: 700 !important;
}

/* ================= DROPDOWN DEVEXPRESS SOBRE POPUP ================= */

.dxeDropDownWindow,
.dxpcDropDown,
.dxeCalendar,
.dxeListBox,
.dxeCalendarFastNav {
    z-index: 999999999 !important;
}

/* ================= HINT ================= */

.hint-formulario {
    z-index: 9999999 !important;
}

    .hint-formulario .dxh-title {
        display: none !important;
    }

    .hint-formulario .dxh-content {
        font-size: 13px;
        color: #444;
    }

/* ================= ANIMACIÓN ================= */

@keyframes fadeTab {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================= MÓVIL ================= */

@media (max-width: 768px) {
    html,
    body {
        overflow: hidden !important;
        height: 100vh !important;
        width: 100vw !important;
    }

    .popup-pregrado,
    .popup-pregrado .dxpc-mainDiv,
    .popup-pregrado .dxpc-contentWrapper,
    .popup-pregrado .dxpc-content {
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    .pregrado-container {
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        display: block !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    .pregrado-left {
        display: none !important;
    }

    .pregrado-right {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px 12px 18px 12px !important;
        box-sizing: border-box !important;
    }

    .right-logo img {
        max-height: 36px;
    }

    .form-title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .tabs-body {
        max-width: 100% !important;
        padding-bottom: 8px !important;
    }

    .pc-pregrado .dxtc-stripContainer {
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 7px !important;
        margin-bottom: 10px !important;
    }

    .pc-pregrado .dxtc-tab,
    .pc-pregrado .dxtc-activeTab {
        font-size: 11px !important;
        padding: 7px 10px !important;
    }

    .dxflGroupCell {
        padding: 3px 4px !important;
    }

    .li-modern {
        padding-bottom: 9px !important;
    }

    .form-actions {
        position: static !important;
        margin-top: 14px !important;
        padding-bottom: 16px !important;
        background: transparent !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }

    .btn-modern,
    .btn-secondary-pre {
        width: 100% !important;
        min-width: 100% !important;
        height: 36px !important;
    }

    .dx-modern-input input,
    .dx-modern-input .dxeEditAreaSys,
    .combo-devexpress-normal input,
    .combo-devexpress-normal .dxeEditAreaSys {
        height: 38px !important;
        line-height: 38px !important;
    }
}

/* Quitar línea/sombra interna de tabs DevExpress */
.pc-pregrado .dxtc-tab,
.pc-pregrado .dxtc-activeTab,
.pc-pregrado .dxtc-tab *,
.pc-pregrado .dxtc-activeTab * {
    border-top: none !important;
    border-bottom: none !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ================= POPUP CAPTCHA REDONDEADO ================= */

.popup-captcha-dev,
.popup-captcha-dev .dxpc-mainDiv,
.popup-captcha-dev .dxpc-contentWrapper,
.popup-captcha-dev .dxpc-content,
.popup-captcha-dev .dxpc-header,
.popup-captcha-dev .dxpc-shadow {
    border-radius: 22px !important;
    overflow: hidden !important;
}

    /* borde elegante */
    .popup-captcha-dev .dxpc-mainDiv {
        border: 0px solid #e5e7eb !important;
        box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
    }

    /* header */
    .popup-captcha-dev .dxpc-header {
        background: #fff !important;
        border-bottom: 0px solid #eef2f7 !important;
        padding: 12px 16px !important;
        font-weight: 700 !important;
        color: #34495e !important;
    }

    /* contenido */
    .popup-captcha-dev .dxpc-content {
        padding: 20px !important;
        background: #fff !important;
    }

    /* botón cerrar */
    .popup-captcha-dev .dxpc-closeButton,
    .popup-captcha-dev .dxpc-closeButtonHover {
        border-radius: 50% !important;
    }

    /* Quitar borde gris del popup captcha */
    .popup-captcha-dev,
    .popup-captcha-dev .dxpc-mainDiv,
    .popup-captcha-dev .dxpc-contentWrapper,
    .popup-captcha-dev .dxpc-content,
    .popup-captcha-dev .dxpc-header {
        border: none !important;
        outline: none !important;
    }

        .popup-captcha-dev .dxpc-mainDiv {
            box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
        }