#r-loading {
    width: 100%;    
    justify-content: center;
    align-items: center;
    margin: 92px auto;
}

.spinner {
    width: 48px;
    height: 48px;
    margin: 0px auto;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.css-result {
    margin: 0px auto;
    padding: 24px;
    border: 1px solid #cfd4e2;
    border-radius: 32px;
    background-color: #fff;
    width: 400px;
}

#r-deuda {
    font-weight: bolder;
    font-size: xxx-large;
}



#r-resultado{
    margin: 0px auto;
    display: none;
}

#r-err-404 {
    text-align: center; margin: 0px auto;max-width: fit-content;
}

#r-err-404 p{
    text-align: center;
}

.r-avatar {
    border-radius: 50%;
    position: absolute;
}

.r-adicional {
    margin-top: 24px;
    height: 24px;
}

.r-adicional div {
    position: relative;
    /*border: 1px solid #ebebeb;*/
    border-radius: 8px;
    padding: 0px 4px;
}

.r-adicional div span {
    font-size: small;
    color: gray
}


/*interfaz*/
.tw-input {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.5;
    color: #374151;
    /* text-gray-700 */
    background-color: #ffffff;
    border: 1px solid #b5bfd9 !important;
    /* border-gray-300 */
    border-radius: 0.375rem !important;
    /* rounded-md - 6px */
    transition: all 0.15s ease-in-out;
    box-shadow: 0 0 0 0 #b5bfd9 !important;
    /* shadow-sm */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-indent: 1rem;
    padding: 0.625rem 0rem;
    font-style: normal !important;
    /* py-2.5 px-6 */
}

.tw-input:focus {
    outline: none;
    border-color: #3b82f6;
    /* focus:border-blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    /* focus:ring-3 focus:ring-blue-500/10 */
    z-index: 10;
    position: relative;
}

.tw-input::placeholder {
    color: #9ca3af;
    /* placeholder-gray-400 */
    opacity: 1;
}

.tw-input:disabled {
    background-color: #f9fafb;
    /* bg-gray-50 */
    color: #6b7280;
    /* text-gray-500 */
    cursor: not-allowed;
    opacity: 0.7;
}


/* ===== BOTÓN BASE - Tailwind-like ===== */
.tw-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    /* py-2.5 px-6 */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    /* font-medium */
    line-height: 1.25rem;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    /* rounded-md */
    transition: all 0.15s ease-in-out;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: relative;
    overflow: hidden;
}

/* Focus States (Tailwind's ring) */
.tw-btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow:  0 0 #0000;
}

/* Disabled State */
.tw-btn:disabled,
.tw-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading State */
.tw-btn.loading {
    color: transparent !important;
}

.tw-btn.loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: tw-spin 0.8s linear infinite;
}

@keyframes tw-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.btn-primary {
    background-color: #3b82f6;
    /* bg-blue-600 */
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb;
    /* hover:bg-blue-700 */
}

.btn-primary:active {
    background-color: #1d4ed8;
    /* active:bg-blue-800 */
}

:focus {
    outline: 0;
    border-color: #2260ff;
    box-shadow: 0 0 0 4px #b5c9fc;
}

.options div {
    display: flex;        
    justify-content: left;
    width: 100%;
    margin-bottom: 30px;
}

.options input[type="radio"] {
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.options input[type="radio"]:checked+span {    
    z-index: 1;
    border-bottom: 4px solid  #0043ed;
    color: #0043ed;
}
label span {
    display: block;
    cursor: pointer;
    background-color: #fff;
    letter-spacing: .05em;    

    color: #888;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    transition: color 0.2s, border-color 0.2s;
}

.group {
    display: flex;
    line-height: 30px;
    align-items: center;
    position: relative;
    max-width: 400px;
}


/* ── General ── */
body {  
  font-family: 'Segoe UI', sans-serif;
  font-family: 'DM Sans', sans-serif;
  font-family: 'Nunito', sans-serif;
}

.page-wrapper {
  padding: 2rem;
}

.card-container {
  width: 100%;
  max-width: 600px;
}

/* ── Title ── */
.main-title {
  font-size: 2rem;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.5px;
}

.main-subtitle {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
}

/* ── Card ── */
.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

/* ── Tabs ── */
.custom-tabs {
  border-bottom: 2px solid #e5e7eb;
}

.custom-tabs .nav-link {
  color: #888;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.5rem 1.1rem;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  transition: color 0.2s, border-color 0.2s;
}

.custom-tabs .nav-link:hover {
  color: #1d72f3;
}

.custom-tabs .nav-link.active {
  color: #1d72f3;
  border-bottom: 3px solid #1d72f3;
  background: transparent;
}

/* ── Input ── */
.input-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;  
  margin-bottom: 6px;
}

.custom-input-group .input-group-text {
  background: #fff;
  border-right: none;
  color: #aaa;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px 0 0 8px;
  border: 1.5px solid #d1d5db;
}

.custom-input-group .form-control {  
  border-radius: 16px;
  border: 1.5px solid #d1d5db;
  font-size: 1rem;  
  box-shadow: none;
  padding: 8px 16px;
}

.custom-input-group .form-control:focus {
  box-shadow: none;
  border-color: #1d72f3;
}

.custom-input-group .form-control:focus + .input-group-text,
.custom-input-group:focus-within .input-group-text {
  border-color: #1d72f3;
}

.custom-input-group input::placeholder {  
  color: #c7c6c6;
  font-style: italic;
}

.hint-text {
  font-size: 0.7rem;
  color: #818181;
  font-style: italic;
  display: block;
  margin-top: 8px;
}

/* ── Buttons ── */
.btn-primary {
  background-color: #1d72f3 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.5px;
  border-radius: 10px !important;
  padding: 0.65rem 1.5rem !important;
  border: none;
  transition: background 0.2s, transform 0.1s !important;
}

.btn-primary:hover {
  background-color: #155dcc !important;
  color: #fff !important;
}

.btn-primary:active {
  transform: scale(0.98) !important;
}

.btn-clear {
  background-color: transparent !important;
  color: #555 !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 10px !important;
  padding: 0.65rem 1.2rem !important;
  transition: background 0.2s, border-color 0.2s !important;
  white-space: nowrap !important;
}

.btn-clear:hover {
  background-color: #f3f4f6;
  border-color: #aaa;
  color: #333;
}

h1{
    font-family: unset !important;
}


* { box-sizing: border-box; }


    .page-wrapper {
      max-width: 640px;
      margin: 0 auto;
    }

    h1.page-title {
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a2e;
      margin-bottom: 4px;
    }

    .page-subtitle {
      font-size: 0.92rem;
      color: #6b7280;
      margin-bottom: 24px;
    }

    /* ── Blue card ── */
    .debt-card {
      background: linear-gradient(135deg, #1e3fa8 0%, #2563eb 60%, #0f3675 100%);
      border-radius: 20px;
      padding: 28px 28px 24px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 24px;
      box-shadow: 0 8px 32px rgba(37, 99, 235, 0.35);
    }

    .debt-warning {
      background: linear-gradient(135deg, #e0b047 0%, #ffd06c 60%, #ffd272 100%);
      border-radius: 20px;
      padding: 12px 24px;
      font-size: smaller;
      color: #2d2d2d;;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;      
      margin-bottom: 24px;
      box-shadow: 0 8px 32px rgba(221, 169, 71, 0.35);
    }

    .debt-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0.85;
      margin-bottom: 6px;
    }

    .debt-amount {
      font-size: 3rem;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 10px;
    }

    .debt-amount sup {
      font-size: 1.4rem;
      vertical-align: top;
      margin-top: 6px;
    }

    .debt-due {
      font-size: 0.8rem;
      opacity: 0.8;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .debt-due svg { flex-shrink: 0; }

    .btn-pay {
      background: #fff;
      color: #1e3fa8;
      border: none;
      border-radius: 12px;
      padding: 14px 26px;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      white-space: nowrap;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    }

    .btn-pay:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .btn-pay svg { color: #2563eb; }

    /* ── Info card ── */
    .info-card {
      background: #fff;
      border-radius: 20px;
      padding: 28px;
      box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    }

    .info-section-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: #1a1a2e;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
    }

    .info-section-title .icon-wrap {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: #eff6ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2563eb;
    }

    .info-field {
      margin-bottom: 16px;
    }

    .info-field:last-child { margin-bottom: 0; }

    .field-label {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #9ca3af;
      margin-bottom: 2px;
    }

    .field-value {
      font-size: 0.85rem;
      font-weight: 400;
      color: #1a1a2e;
    }

    .divider {
      border: none;
      border-top: 1px solid #f0f2f7;
      margin: 24px 0;
    }

    @media (max-width: 480px) {
      h1.page-title { font-size: 1.6rem; }
      .debt-amount { font-size: 2.4rem; }
      .debt-card { padding: 22px 20px; }
      .btn-pay { width: 100%; justify-content: center; }
      .info-card { padding: 22px 18px; }
    }


/*loading*/
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }    

    .card {
      background: #fff;
      border-radius: 24px;
      padding: 56px 48px 48px;
      text-align: center;
      max-width: 420px;
      width: 90%;
      box-shadow: 0 4px 32px rgba(0,0,0,0.06);
    }

    /* ── Spinner container ── */
    .spinner-wrap {
      position: relative;
      width: 120px;
      height: 120px;
      margin: 0 auto 40px;
    }

    /* Soft filled circle behind icon */
    .icon-circle {
      position: absolute;
      inset: 12px;
      border-radius: 50%;
      /*background: radial-gradient(circle at 40% 35%, #ebf1ff 0%, #dff4fd 100%);*/
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* SVG database icon */
    .icon-circle svg {
      width: 40px;
      height: 40px;
      color: darkgray;
    }

    /* Spinner ring via conic-gradient */
    .ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(
        #1773fd 0deg 70deg,
        transparent 70deg 360deg
      );
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), white calc(100% - 5px));
              mask: radial-gradient(farthest-side, transparent calc(100% - 5px), white calc(100% - 5px));
      animation: spin 1.4s linear infinite;
    }

    /* Track ring */
    .ring-track {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(#ede9e6 0deg 360deg);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), white calc(100% - 5px));
              mask: radial-gradient(farthest-side, transparent calc(100% - 5px), white calc(100% - 5px));
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ── Text ── */
    h2 {
      font-size: medium !important;
      font-weight: 700 !important;
      color: #1a2e44 !important;
      line-height: 1.35 !important;
      margin-bottom: 14px !important;
      font-family: 'Nunito', sans-serif !important;
    }

    p {
      font-size: 0.95rem;
      color: #7a8fa6;
      line-height: 1.6;
    }

    /* animated ellipsis on h2 */
    .dots::after {
      content: '';
      animation: dots 1.5s steps(4, end) infinite;
    }
    @keyframes dots {
      0%   { content: ''; }
      25%  { content: '.'; }
      50%  { content: '..'; }
      75%  { content: '...'; }
      100% { content: ''; }
    }


iframe#modalBoxContentPaymentCheckout {
  .button{
    background-color: red !important;
  }
}

.receipt-card { max-width: 760px; border-radius: 20px !important; overflow: hidden; border: none !important; box-shadow: 0 8px 40px rgba(0,0,0,0.13) !important;  padding: 0;}
.panel-left {
  background:
    linear-gradient(to bottom, rgba(20,60,100,0.35) 0%, rgba(10,30,60,0.75) 100%),
    url('https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?auto=format&fit=crop&w=800&q=80') center/cover no-repeat;
  min-height: 320px;
}
.icon-success { width:58px; height:58px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 10px rgba(34,197,94,0.12); font-size:1.7rem; color:#fff; display:flex; align-items:center; justify-content:center; }
.icon-error   { width:62px; height:62px; border-radius:50%; background:#ef4444; box-shadow:0 0 0 12px rgba(239,68,68,0.12);  font-size:1.8rem; color:#fff; }
.detail-label { font-size:0.85rem; color:#7a8fa6; font-weight:600; }
.detail-value { font-size:0.9rem; font-weight:700; color:#1a2e44; }
.detail-value.total { font-size:1.15rem; color:#2563eb; font-weight:800; }
/*.btn-download { background-color:#2563eb; color:#fff; font-weight:700; border-radius:10px; line-height:1.3; }
*/.btn-download:hover { background-color:#1d4ed8; color:#fff; }
.btn-accept { background-color:#f1f4f8; color:#1a2e44; font-weight:700; border-radius:10px; }
.btn-accept:hover { background-color:#e2e8f0; color:#1a2e44; }
.footer-note { font-size:0.73rem; color:#a0afc0; line-height:1.6; }