:root {
      --mbs-navy: #192649;
      --mbs-blue: #1d4c77;
      --mbs-gold: #ddb903;
      --mbs-gold-soft: #f5d941;
      --mbs-white: #ffffff;
      --mbs-text: #353b4d;
      --mbs-muted: #6c7384;
      --mbs-soft: #f5f7fa;
    }

    body .jconfirm.jconfirm-mbs,
    body .jconfirm.jconfirm-mbs *,
    body .jconfirm.jconfirm-mbs *::before,
    body .jconfirm.jconfirm-mbs *::after { box-sizing: border-box; }

    /* Fondo del modal */
    body .jconfirm.jconfirm-mbs {
      padding: 18px !important;
      font-family: "Montserrat", Arial, sans-serif;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-bg {
      background: rgba(10, 20, 46, .82);
      backdrop-filter: blur(8px);
    }

    /*
      Centrado real y permanente:
      se fuerza la estructura interna de jConfirm a ocupar toda la ventana
      y a centrar la caja en ambos ejes.
    */
    body .jconfirm.jconfirm-mbs .jconfirm-scrollpane {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 100dvh;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      overflow-y: auto;
      padding: 18px;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-row,
    body .jconfirm.jconfirm-mbs .jconfirm-cell {
      width: 100%;
      height: auto;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-box-container {
      float: none !important;
      width: min(560px, 100%) !important;
      max-width: 560px !important;
      margin: auto !important;
      padding: 0 !important;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-box {
      position: relative;
      width: 100%;
      margin: 0 !important;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-radius: 24px;
      background: var(--mbs-white);
      box-shadow: 0 28px 80px rgba(3, 10, 28, .38);
      animation: mbsModalEntrance .62s cubic-bezier(.16, 1, .3, 1) both;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-title-c { display: none; }
    body .jconfirm.jconfirm-mbs .jconfirm-content-pane { margin: 0; }
    body .jconfirm.jconfirm-mbs .jconfirm-content {
      padding: 0;
      overflow: visible;
      color: var(--mbs-text);
      text-align: left;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon {
      z-index: 10;
      top: 18px;
      right: 18px;
      width: 42px;
      height: 42px;
      display: block;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 14px;
      color: transparent !important;
      font-size: 0 !important;
      background: rgba(255,255,255,.11);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 8px 18px rgba(0,0,0,.12);
      opacity: 1;
      cursor: pointer;
      transition:
        background-color .38s cubic-bezier(.22, 1, .36, 1),
        border-color .38s ease,
        transform .25s ease,
        box-shadow .38s ease;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon::before,
    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 17px;
      height: 2px;
      border-radius: 99px;
      background: #fff;
      transform-origin: center;
      transition: width .25s ease, background-color .38s ease;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon:hover {
      border-color: rgba(221,185,3,.7);
      background: var(--mbs-gold);
      box-shadow: 0 9px 22px rgba(0,0,0,.2);
      transform: translateY(-2px) rotate(4deg);
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon:hover::before,
    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon:hover::after {
      width: 19px;
      background: var(--mbs-navy);
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon:active {
      transform: scale(.92);
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon:focus-visible {
      outline: 3px solid rgba(221,185,3,.55);
      outline-offset: 3px;
    }

    /* Contraste automático cuando la X queda sobre una zona blanca o clara. */
    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon.mbs-close--light {
      border-color: rgba(221,185,3,.92);
      background-color: var(--mbs-navy);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 9px 22px rgba(25,38,73,.25);
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon.mbs-close--light::before,
    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon.mbs-close--light::after {
      background-color: #fff;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon.mbs-close--light:hover {
      border-color: var(--mbs-navy);
      background: var(--mbs-gold);
      box-shadow: 0 10px 24px rgba(25,38,73,.27);
    }

    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon.mbs-close--light:hover::before,
    body .jconfirm.jconfirm-mbs .jconfirm-closeIcon.mbs-close--light:hover::after {
      background: var(--mbs-navy);
    }

    .mbs-modal__header {
      position: relative;
      min-height: 178px;
      display: flex;
      align-items: center;
      gap: 20px;
      overflow: hidden;
      padding: 38px 42px 30px;
      color: #fff;
      background: var(--mbs-navy);
    }

    .mbs-modal__header::before {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -125px;
      bottom: -175px;
      border: 38px solid rgba(221,185,3,.15);
      border-radius: 50%;
      animation: mbsOrbit 8s ease-in-out infinite alternate;
    }

    .mbs-modal__header::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 5px;
      background: var(--mbs-gold);
      transform-origin: left;
      animation: mbsGoldLine .8s .18s cubic-bezier(.16,1,.3,1) both;
    }

    .mbs-modal__icon {
      position: relative;
      z-index: 1;
      width: 72px;
      height: 72px;
      flex: 0 0 72px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      color: var(--mbs-navy);
      background: var(--mbs-gold);
      box-shadow: 0 12px 28px rgba(0,0,0,.22);
      animation: mbsFloat 3s ease-in-out infinite;
    }

    .mbs-modal__icon svg { width: 35px; height: 35px; }
    .mbs-modal__heading { position: relative; z-index: 1; }
    .mbs-modal__heading { animation: mbsContentUp .55s .12s ease-out both; }

    .mbs-modal__eyebrow {
      margin: 0 0 8px;
      color: var(--mbs-gold-soft);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .mbs-modal__title {
      max-width: 360px;
      margin: 0;
      color: #fff;
      font-size: 28px;
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -.025em;
    }

    .mbs-modal__body { padding: 29px 42px 6px; }

    .mbs-modal__status {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 16px;
      padding: 8px 12px;
      border: 1px solid rgba(221,185,3,.35);
      border-radius: 999px;
      color: #645500;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      background: #fff9d9;
      animation: mbsContentUp .5s .24s ease-out both;
    }

    .mbs-modal__status::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--mbs-gold);
      box-shadow: 0 0 0 4px rgba(221,185,3,.16);
      animation: mbsPulse 1.8s ease-out infinite;
    }

    .mbs-modal__copy {
      margin: 0;
      color: var(--mbs-text);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.72;
      animation: mbsContentUp .5s .3s ease-out both;
    }

    .mbs-modal__copy strong { color: var(--mbs-navy); }

    .mbs-modal__platform {
      margin-top: 20px;
      display: grid;
      grid-template-columns: 44px 1fr;
      align-items: center;
      gap: 13px;
      padding: 14px 16px;
      border: 1px solid #dce3ec;
      border-radius: 15px;
      background: var(--mbs-soft);
      animation: mbsContentUp .5s .36s ease-out both;
      transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    }

    .mbs-modal__platform:hover {
      border-color: rgba(29,76,119,.35);
      box-shadow: 0 10px 25px rgba(25,38,73,.08);
      transform: translateY(-2px);
    }

    .mbs-modal__platform-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: #fff;
      background: var(--mbs-blue);
    }

    .mbs-modal__platform-icon svg { width: 22px; height: 22px; }
    .mbs-modal__platform small,
    .mbs-modal__platform strong { display: block; }

    .mbs-modal__platform small {
      margin-bottom: 3px;
      color: var(--mbs-muted);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .mbs-modal__platform strong {
      color: var(--mbs-navy);
      font-size: 13px;
      font-weight: 800;
    }

    .mbs-modal__note {
      margin-top: 15px;
      padding: 13px 15px;
      border-left: 3px solid var(--mbs-gold);
      border-radius: 5px 12px 12px 5px;
      color: #566177;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.55;
      background: #f7f4e5;
      animation: mbsContentUp .5s .42s ease-out both;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-buttons {
      width: 100%;
      padding: 22px 42px 35px;
      text-align: right;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-buttons button {
      min-width: 190px;
      min-height: 50px;
      margin: 0;
      border-radius: 12px;
      color: #fff;
      font: 800 12px/1.2 "Montserrat", Arial, sans-serif;
      text-transform: none;
      background: var(--mbs-blue);
      box-shadow: 0 10px 22px rgba(29,76,119,.22);
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }

    body .jconfirm.jconfirm-mbs .jconfirm-buttons button:hover {
      color: var(--mbs-navy);
      background: var(--mbs-gold);
      box-shadow: 0 12px 25px rgba(221,185,3,.25);
      transform: translateY(-2px);
    }

    body .jconfirm.jconfirm-mbs .jconfirm-buttons button:focus-visible {
      outline: 3px solid rgba(221,185,3,.42);
      outline-offset: 3px;
    }

    @keyframes mbsFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }

    @keyframes mbsModalEntrance {
      0% { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(5px); }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    @keyframes mbsContentUp {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes mbsGoldLine {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    @keyframes mbsPulse {
      0% { box-shadow: 0 0 0 0 rgba(221,185,3,.35); }
      70%, 100% { box-shadow: 0 0 0 8px rgba(221,185,3,0); }
    }

    @keyframes mbsOrbit {
      from { transform: translate3d(0,0,0) rotate(0); }
      to { transform: translate3d(-15px,-8px,0) rotate(12deg); }
    }

    @media (max-width: 600px) {
      .prueba { margin: 28px auto; }
      .prueba__botones { align-items: stretch; flex-direction: column; }

      body .jconfirm.jconfirm-mbs,
      body .jconfirm.jconfirm-mbs .jconfirm-scrollpane { padding: 12px !important; }

      body .jconfirm.jconfirm-mbs .jconfirm-box { border-radius: 20px; }
      body .jconfirm.jconfirm-mbs .jconfirm-closeIcon {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        border-radius: 13px;
      }

      .mbs-modal__header {
        min-height: 190px;
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
        padding: 31px 24px 26px;
      }

      .mbs-modal__icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        border-radius: 16px;
      }

      .mbs-modal__icon svg { width: 29px; height: 29px; }
      .mbs-modal__title { padding-right: 18px; font-size: 22px; }
      .mbs-modal__body { padding: 23px 24px 5px; }
      .mbs-modal__copy { font-size: 13px; }

      body .jconfirm.jconfirm-mbs .jconfirm-buttons { padding: 19px 24px 27px; }
      body .jconfirm.jconfirm-mbs .jconfirm-buttons button { width: 100%; min-width: 0; }
    }

    @media (max-width: 380px) {
      body .jconfirm.jconfirm-mbs,
      body .jconfirm.jconfirm-mbs .jconfirm-scrollpane { padding: 8px !important; }
      body .jconfirm.jconfirm-mbs .jconfirm-box { border-radius: 17px; }
      .mbs-modal__header { min-height: 170px; padding: 24px 18px 22px; }
      .mbs-modal__icon { width: 50px; height: 50px; flex-basis: 50px; border-radius: 14px; }
      .mbs-modal__title { font-size: clamp(18px, 6vw, 21px); }
      .mbs-modal__body { padding: 19px 18px 4px; }
      .mbs-modal__status { font-size: 8px; padding: 7px 10px; }
      .mbs-modal__platform { grid-template-columns: 38px 1fr; padding: 11px 12px; }
      .mbs-modal__platform-icon { width: 38px; height: 38px; }
      .mbs-modal__note { padding: 11px 12px; }
      body .jconfirm.jconfirm-mbs .jconfirm-buttons { padding: 16px 18px 21px; }
      body .jconfirm.jconfirm-mbs .jconfirm-buttons button { min-height: 46px; }
    }

    /* Pantallas de poca altura: conserva el centro y permite desplazamiento seguro. */
    @media (max-height: 720px) {
      body .jconfirm.jconfirm-mbs .jconfirm-scrollpane {
        align-items: flex-start !important;
        padding-block: 12px !important;
      }
      .mbs-modal__header { min-height: 125px; padding-block: 23px 20px; }
      .mbs-modal__icon { width: 56px; height: 56px; flex-basis: 56px; }
      .mbs-modal__body { padding-top: 18px; }
      .mbs-modal__platform { margin-top: 13px; }
      .mbs-modal__note { margin-top: 11px; }
      body .jconfirm.jconfirm-mbs .jconfirm-buttons { padding-top: 15px; padding-bottom: 22px; }
    }

    @media (prefers-reduced-motion: reduce) {
      body .jconfirm.jconfirm-mbs *,
      body .jconfirm.jconfirm-mbs *::before,
      body .jconfirm.jconfirm-mbs *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }