/* =========================
   POPUP PRINCIPAL
========================= */
.popup-modern {
    border: 1px solid #e8edf3 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10) !important;
}

    .popup-modern .dxpc-header,
    .popup-modern .dxpcHeader {
        background: #ffffff !important;
        color: #1f3147 !important;
        border: none !important;
        font-weight: 600 !important;
        font-size: 18px !important;
        padding: 14px 18px !important;
    }

    .popup-modern .dxpc-content,
    .popup-modern .dxpcContent {
        background: #ffffff !important;
        border: none !important;
        padding: 0 !important;
        border-radius: 26px !important;
    }

    .popup-modern .dxpc-closeBtn,
    .popup-modern .dxpcCloseButton {
        opacity: 1 !important;
    }

        .popup-modern .dxpc-closeBtn:hover,
        .popup-modern .dxpcCloseButton:hover {
            opacity: .85 !important;
        }

/* =========================
   CONTENEDOR GENERAL
========================= */
.modern-container {
    display: flex;
    width: 100%;
    min-height: 460px;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    background: #ffffff;
    border-radius: 26px;
    overflow: hidden;
}

/* =========================
   PANEL IZQUIERDO
========================= */
.left-panel {
    width: 42%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    box-sizing: border-box;
    border-top-left-radius: 26px;
    border-bottom-left-radius: 26px;
}

.left-panel-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 260px;
    padding: 20px;
}

.left-panel h2 {
    margin: 0 0 10px 0;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.08;
    font-weight: 700;
}

.left-panel p {
    margin: 0 0 18px 0;
    color: rgba(255,255,255,.96);
    font-size: 14px;
    line-height: 1.3;
}

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

.left-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .8s ease-in-out;
}

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

    .left-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.left-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,.10), rgba(15,23,42,.22));
    z-index: 2;
    display: none;
}

.slider-dots {
    text-align: end;
    display: none !important;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    cursor: pointer;
}

    .dot.active {
        background: #ffffff;
    }

/* =========================
   PANEL DERECHO
========================= */
.right-panel {
    width: 58%;
    background: #ffffff;
    color: #1f3147;
    padding: 22px 30px 20px 24px;
    box-sizing: border-box;
    border-left: 1px solid #eef2f7;
    border-top-right-radius: 26px;
    border-bottom-right-radius: 26px;
}

    .right-panel h2 {
        margin: 0 0 14px 0;
        color: #f3703a;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        letter-spacing: .3px;
    }

.right-logo {
    text-align: center;
    margin-bottom: 12px;
}

    .right-logo img {
        max-width: 180px;
        max-height: 80px;
        display: inline-block;
    }

.right-panel .dxflItem {
    padding-bottom: 3px !important;
    margin-bottom: 0 !important;
}

.right-panel .dxflGroupCell,
.right-panel .dxflNestedControlCell {
    padding: 2px 10px 2px 0 !important;
}

/* =========================
   BOTON PRINCIPAL
========================= */
.btn-modern,
.btn-modern .dxb,
.btn-modern .dxbButton,
.btn-modern .dx-vam {
    background: linear-gradient(135deg, #f3703a 0%, #ff8a4c 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.btn-modern {
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 20px rgba(243, 112, 58, 0.22) !important;
}

    .btn-modern:hover,
    .btn-modern:hover .dxb,
    .btn-modern:hover .dxbButton {
        opacity: .96;
    }

/* =========================
   CAMPOS MODERNOS
========================= */
.li-modern {
    position: relative;
    margin-bottom: 8px;
}

    .li-modern.li-required::before {
        content: none !important;
        display: none !important;
    }

.dx-modern-input {
    position: relative !important;
    transition: all 0.2s ease !important;
}

    /* capa visible real */
    .dx-modern-input.dxeTextBoxSys,
    .dx-modern-input.dxeButtonEditSys,
    .dx-modern-input.dxeMemoSys,
    .dx-modern-input.dxeTextBox_MetropolisBlue,
    .dx-modern-input.dxeButtonEdit_MetropolisBlue,
    .dx-modern-input.dxeMemo_MetropolisBlue,
    .dx-modern-input.dxeTextBox,
    .dx-modern-input.dxeButtonEdit,
    .dx-modern-input.dxeMemo {
        width: 100% !important;
        border: 1px solid #d8e1ea !important;
        border-radius: 22px !important;
        background: #ffffff !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    /* alto de textbox/combo/fecha */
    .dx-modern-input.dxeTextBoxSys,
    .dx-modern-input.dxeButtonEditSys,
    .dx-modern-input.dxeTextBox_MetropolisBlue,
    .dx-modern-input.dxeButtonEdit_MetropolisBlue,
    .dx-modern-input.dxeTextBox,
    .dx-modern-input.dxeButtonEdit {
        height: 42px !important;
    }

    /* memo */
    .dx-modern-input.dxeMemoSys,
    .dx-modern-input.dxeMemo_MetropolisBlue,
    .dx-modern-input.dxeMemo {
        min-height: 90px !important;
    }

    /* input interno */
    .dx-modern-input .dxeEditArea,
    .dx-modern-input .dxeEditAreaSys,
    .dx-modern-input .dxeEditArea_MetropolisBlue,
    .dx-modern-input input[type="text"],
    .dx-modern-input input {
        height: 40px !important;
        line-height: 40px !important;
        padding-left: 40px !important;
        padding-right: 12px !important;
        border: 0 !important;
        border-radius: 22px !important;
        background: transparent !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* textarea interno */
    .dx-modern-input textarea,
    .dx-modern-input .dxeMemoEditAreaSys {
        padding: 12px 14px 12px 40px !important;
        border: 0 !important;
        border-radius: 22px !important;
        background: transparent !important;
        box-sizing: border-box !important;
        resize: none !important;
        font-size: 14px !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* hover/focus */
    .dx-modern-input:hover {
        border-color: #f47b38 !important;
    }

    .dx-modern-input.dxeFocused,
    .dx-modern-input.dxeFocused_MetropolisBlue,
    .dx-modern-input.dxeTextBoxSys.dxeFocused,
    .dx-modern-input.dxeButtonEditSys.dxeFocused,
    .dx-modern-input.dxeMemoSys.dxeFocused {
        border-color: #f47b38 !important;
        box-shadow: 0 0 0 3px rgba(244, 123, 56, 0.10) !important;
        border-radius: 22px !important;
    }

    /* =========================
   BOTON DERECHA COMBO / FECHA
========================= */
    .dx-modern-input .dxeButtonEditButton,
    .dx-modern-input .dxeCalendarButton,
    .dx-modern-input .dxeButtonEditButton_MetropolisBlue,
    .dx-modern-input .dxeCalendarButton_MetropolisBlue,
    .dx-modern-input .dxeButtonEditRightAlignCell {
        width: 34px !important;
        min-width: 34px !important;
        background: transparent !important;
        border-left: 0 !important;
        border-radius: 0 22px 22px 0 !important;
        overflow: hidden !important;
    }

        .dx-modern-input .dxeButtonEditButton:hover,
        .dx-modern-input .dxeCalendarButton:hover,
        .dx-modern-input .dxeButtonEditButton_MetropolisBlue:hover,
        .dx-modern-input .dxeCalendarButton_MetropolisBlue:hover {
            background: rgba(243,112,58,.06) !important;
        }

        .dx-modern-input .dxeButtonEditButton *,
        .dx-modern-input .dxeCalendarButton *,
        .dx-modern-input .dxeButtonEditButton_MetropolisBlue *,
        .dx-modern-input .dxeCalendarButton_MetropolisBlue * {
            background: transparent !important;
            background-image: none !important;
            box-shadow: none !important;
        }

    /* =========================
   ICONOS
========================= */
    .dx-modern-input::before {
        content: "";
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        width: 17px;
        height: 17px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 17px 17px;
        opacity: .75;
        z-index: 4;
        pointer-events: none;
    }

    .dxeMemo.dx-modern-input::before,
    .dx-modern-input.ico-address::before {
        top: 16px;
        transform: none;
    }

.ico-user::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627c98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21a8 8 0 0 0-16 0'/><circle cx='12' cy='7' r='4'/></svg>");
}

.ico-mail::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627c98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16v12H4z'/><path d='m4 7 8 6 8-6'/></svg>");
}

.ico-phone::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627c98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.63 2.62a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.46-1.2a2 2 0 0 1 2.11-.45c.84.3 1.72.51 2.62.63A2 2 0 0 1 22 16.92z'/></svg>");
}

.ico-id::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627c98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='8' cy='12' r='2'/><path d='M12 10h5M12 14h5'/></svg>");
}

.ico-calendar::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627c98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>");
}

.ico-gender::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627c98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M6 20c1.5-3 4-4.5 6-4.5s4.5 1.5 6 4.5'/></svg>");
}

.ico-plan::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627c98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5V6.5A1.5 1.5 0 0 1 5.5 5H20'/><path d='M8 5h12v14H8a2 2 0 0 0 0 4h12'/></svg>");
}

.ico-address::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23627c98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 1 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}

/* =========================
   DROPDOWN / CALENDARIO
========================= */
.dxeListBox_MetropolisBlue,
.dxeListBox_Office365,
.dxeListBox {
    background: #ffffff !important;
    color: #1f3147 !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08) !important;
}

    .dxeListBox_MetropolisBlue .dxeListBoxItem,
    .dxeListBox_Office365 .dxeListBoxItem,
    .dxeListBox .dxeListBoxItem,
    .dxeListBox_MetropolisBlue .dxeListBoxItemRow_Office365,
    .dxeListBox_Office365 .dxeListBoxItemRow_Office365,
    .dxeListBox .dxeListBoxItemRow_Office365 {
        background: #ffffff !important;
        color: #1f3147 !important;
    }

    .dxeListBox_MetropolisBlue .dxeListBoxItemSelected,
    .dxeListBox_Office365 .dxeListBoxItemSelected,
    .dxeListBox .dxeListBoxItemSelected,
    .dxeListBox_MetropolisBlue .dxeListBoxItemHover,
    .dxeListBox_Office365 .dxeListBoxItemHover,
    .dxeListBox .dxeListBoxItemHover {
        background: #f8fafc !important;
        color: #1f3147 !important;
    }

.dxeCalendar,
.dxeCalendar td,
.dxeCalendar span {
    color: #1f3147 !important;
}

/* =========================
   TOASTS
========================= */
.swal2-container,
.swal2-popup {
    z-index: 99999999 !important;
}

.toast-error-custom {
    background: #ffffff !important;
    border: 1px solid #ef4444 !important;
    border-left: 5px solid #dc2626 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.12) !important;
    padding: 12px 14px !important;
    z-index: 99999999 !important;
}

.toast-error-title {
    color: #b91c1c !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.swal2-icon.swal2-error {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}

.toast-error-custom .swal2-timer-progress-bar {
    background: #dc2626 !important;
}

.toast-ok-custom {
    background: #ffffff !important;
    border: 1px solid #22c55e !important;
    border-left: 5px solid #16a34a !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.12) !important;
    padding: 12px 14px !important;
    z-index: 99999999 !important;
}

.toast-ok-title {
    color: #166534 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.toast-ok-custom .swal2-timer-progress-bar {
    background: #16a34a !important;
}

/* =========================
   ERROR EN CAMPOS
========================= */
.right-panel .campo-invalido {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.14) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
}

    .right-panel .campo-invalido .dxeEditArea,
    .right-panel .campo-invalido .dxeEditAreaSys,
    .right-panel .campo-invalido input,
    .right-panel .campo-invalido textarea {
        border-radius: 22px !important;
    }

    .right-panel .campo-invalido .dxeButtonEditButton,
    .right-panel .campo-invalido .dxeCalendarButton,
    .right-panel .campo-invalido .dxeButtonEditButton_Office365 {
        border-top-right-radius: 22px !important;
        border-bottom-right-radius: 22px !important;
    }

.dxic .dxeErrorFrameSys,
.dxic .dxeErrorFrameWithoutErrorSys,
.dxeErrorCell,
.dxeErrorFrameSys,
.dxeErrorFrameWithoutErrorSys {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dxShowErrorFrame .dxeTextBoxSys,
.dxShowErrorFrame .dxeButtonEditSys,
.dxShowErrorFrame .dxeMemoSys,
.dxShowErrorFrame input,
.dxShowErrorFrame textarea {
    border-color: #dbe3ec !important;
    box-shadow: none !important;
}

/* =========================
   POPUP CAPTCHA
========================= */
.popup-captcha-dev .dxpc-content,
.popup-captcha-dev .dxpcContent {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 0 !important;
}

.popup-captcha-dev .dxpc-header,
.popup-captcha-dev .dxpcHeader {
    background: #ffffff !important;
    color: #1f3147 !important;
    border-bottom: 1px solid #eef2f7 !important;
    font-weight: 700 !important;
}

.captcha-dev-wrap {
    padding: 22px;
}

.captcha-dev-text {
    color: #334155;
    font-size: 14px;
    margin-bottom: 14px;
    text-align: center;
}

.captcha-dev-actions {
    margin-top: 20px;
    text-align: center;
}

.popup-captcha-dev .dxcaControl_Office365,
.popup-captcha-dev .dxcaControl {
    width: 100% !important;
}

.popup-captcha-dev input[type="text"] {
    border-radius: 12px !important;
}

.turnstile-box {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    min-height: 70px;
}

/* =========================
   MARTILLAZO FINAL DEVEXPRESS
========================= */
.dx-modern-input,
.dx-modern-input table,
.dx-modern-input td {
    border-radius: 22px !important;
}

.btn-modern-disabled,
.btn-modern-disabled .dxb,
.btn-modern-disabled .dxbButton,
.btn-modern-disabled .dx-vam {
    background: linear-gradient(135deg, #f6a57f 0%, #f8b18d 100%) !important;
    color: #fff7f2 !important;
    border: none !important;
    opacity: 1 !important;
    box-shadow: 0 6px 16px rgba(243, 112, 58, 0.12) !important;
    cursor: not-allowed !important;
}