:root{--navy:#0b3b75;--blue:#2f80ed;--light:#eef6ff;--text:#1f2d3d;--muted:#64748b;--danger:#b42318;--success:#1f7a45;--warning:#8a5200}*{box-sizing:border-box}body{margin:0;background:#f4f7fb;color:var(--text);font-family:Arial,sans-serif}.shell{max-width:780px;margin:0 auto;padding:20px}.brand{background:var(--navy);color:#fff;padding:18px 22px;border-radius:18px 18px 0 0}.brand-name{font-family:Georgia,serif;font-size:28px;font-weight:700}.brand-sub{opacity:.85;margin-top:3px}.card{background:#fff;border-radius:0 0 18px 18px;padding:26px;box-shadow:0 10px 28px rgba(15,46,80,.12);min-height:320px}h1{color:var(--navy);margin-top:0}h2{color:var(--navy);margin-top:28px}h3{margin:0 0 8px}.grid,.rewards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}.link-card,.reward,.certificate-mini{border:1px solid #dce7f5;border-radius:14px;padding:18px;text-decoration:none;color:var(--text);background:#fff}.link-card:hover,.reward:hover{border-color:var(--blue);box-shadow:0 6px 16px rgba(47,128,237,.1)}.link-card b{display:block;color:var(--navy);margin-bottom:6px}.link-card span,.small{color:var(--muted);font-size:13px}.reward.disabled{opacity:.55}.points{color:var(--navy);font-size:20px;font-weight:700}.balance{background:linear-gradient(135deg,var(--navy),#175da5);color:#fff;border-radius:18px;padding:22px;margin:18px 0}.balance span,.balance small{display:block}.balance strong{display:block;font-size:42px;margin:4px 0}.row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}label{display:block;font-weight:700;color:var(--navy);margin:14px 0}input{width:100%;padding:13px;border:1px solid #c9d6e6;border-radius:9px;margin-top:6px;font-size:16px}button,.btn{border:0;border-radius:9px;padding:12px 18px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}.primary{background:var(--navy);color:#fff}.ghost{background:#edf3fa;color:var(--navy)}.danger{background:var(--danger);color:#fff}button:disabled{opacity:.55;cursor:not-allowed}.msg{padding:12px;border-radius:9px;margin-top:14px}.msg.error{background:#fff0ef;color:#912018}.msg.success{background:#eaf7ef;color:#155d36}.msg.info{background:var(--light);color:var(--navy)}.warning{background:#fff7e6;color:var(--warning);padding:10px;border-radius:8px}.back{display:inline-block;margin-top:18px;color:var(--navy)}.loading{padding:50px;text-align:center;color:var(--muted)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid #e5edf6;text-align:left;font-size:14px}.num{text-align:right;color:var(--success);font-weight:700}.num.neg{color:var(--danger)}.certificate{border:2px solid var(--navy);border-radius:20px;padding:28px;text-align:center;background:linear-gradient(#fff,#f5f9ff)}.code{font-family:monospace;font-size:21px;font-weight:700;letter-spacing:1px;background:var(--light);padding:10px;border-radius:10px;margin:12px 0}.status{display:inline-block;padding:6px 12px;border-radius:999px;background:#eaf7ef;color:var(--success);font-weight:700}.status.canjeado,.status.vencido,.status.cancelado{background:#fff0ef;color:var(--danger)}#qr,.qr-small{display:flex;justify-content:center;margin:14px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}footer{text-align:center;color:var(--muted);font-size:12px;padding:18px}@media(max-width:520px){.shell{padding:0}.brand,.card{border-radius:0}.card{padding:20px}.brand-name{font-size:24px}.balance strong{font-size:36px}.row{align-items:center}}@media print{body{background:#fff}.brand,footer,.actions,.back{display:none}.shell{padding:0}.card{box-shadow:none;padding:0}.certificate{border:2px solid #000}}

/* =========================================
   CORRECCIONES VISUALES PORTAL
========================================= */

/* Botones principales */
button.primary,
.btn.primary,
.primary {
  background-color: #0b3b75 !important;
  color: #ffffff !important;
  border: 2px solid #0b3b75 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

button.primary:hover,
.btn.primary:hover {
  background-color: #175da5 !important;
  border-color: #175da5 !important;
  color: #ffffff !important;
}

/* Botón de aprobación de compras */
button.approve-purchase {
  background-color: #1f7a45 !important;
  color: #ffffff !important;
  border: 2px solid #1f7a45 !important;
  opacity: 1 !important;
}

/* Botón de rechazo */
button.reject-purchase {
  background-color: #fff0ef !important;
  color: #912018 !important;
  border: 1px solid #e6aaa4 !important;
  opacity: 1 !important;
}

/* Botones para canjear recompensas */
button.redeem:not(:disabled) {
  background-color: #0b3b75 !important;
  color: #ffffff !important;
  border: 2px solid #0b3b75 !important;
  margin-top: 12px;
}

button.redeem:disabled {
  background-color: #e8edf4 !important;
  color: #64748b !important;
  border: 1px solid #d3dce8 !important;
}

/* Caja del saldo */
.balance {
  background: #0b3b75 !important;
  background-image:
    linear-gradient(
      135deg,
      #0b3b75,
      #175da5
    ) !important;

  color: #ffffff !important;
}

.balance span,
.balance strong,
.balance small {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Mejor experiencia móvil */
@media (max-width: 520px) {

  form button[type="submit"] {
    display: block !important;
    width: 100% !important;
    margin-top: 18px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
  }

  .actions {
    flex-direction: column;
  }

  .actions button,
  .actions .btn {
    width: 100%;
  }

  button.redeem {
    width: 100%;
  }

  .balance {
    text-align: center;
  }

  .balance strong {
    font-size: 42px !important;
  }
}

/* =========================================
   REGISTRO DE CLIENTES
========================================= */

.checkbox-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 10px;
  margin:
    12px 0
    22px;
}

.checkbox-row {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #d9e1eb;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  line-height: 1.35;
}

.checkbox-row input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 1px 0 0 0 !important;
  padding: 0 !important;
}

.checkbox-row span {
  display: block;
  flex: 1;
}

#registrationForm h2 {
  margin-top: 28px;
  margin-bottom: 10px;
}

#registrationSubmit {
  width: 100%;
  margin-top: 22px;
  padding: 14px 18px;
  font-size: 16px;
}


/* CELULAR */

@media (max-width: 600px) {

  .checkbox-grid {
    grid-template-columns:
      1fr;
  }

  .checkbox-row {
    padding: 12px;
  }

}

/* =========================================
   IDENTIDAD VISUAL
========================================= */

body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at top right,
      #dcecf8 0,
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #edf5fa 0%,
      #f8fafc 55%,
      #eef3f7 100%
    ) !important;
}


.shell {
  padding-top: 30px;
  padding-bottom: 30px;
}


.brand {
  display: flex;
  align-items: center;
  gap: 15px;

  background:
    linear-gradient(
      135deg,
      #0b3b75,
      #175da5
    ) !important;

  color: #ffffff !important;

  box-shadow:
    0 8px 25px
    rgba(11, 59, 117, .18);
}


.brand-logo {
  width: 64px;
  height: 64px;

  object-fit: contain;

  background: #ffffff;

  border-radius: 14px;

  padding: 7px;
}


.brand-copy {
  min-width: 0;
}


.brand-name,
.brand-sub {
  color: #ffffff !important;
  opacity: 1 !important;
}


.card {
  border:
    1px solid
    rgba(11, 59, 117, .08);

  box-shadow:
    0 14px 36px
    rgba(15, 46, 80, .12);
}


@media (max-width: 520px) {

  .shell {
    padding-top: 0;
    padding-bottom: 0;
  }

  .brand-logo {
    width: 52px;
    height: 52px;
  }

  .brand-name {
    font-size: 22px;
  }

}

/* =========================================
   MÉTRICAS DEL PORTAL
========================================= */

.metric-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(140px, 1fr)
    );
  gap: 12px;
  margin: 18px 0 26px;
}

.metric-card {
  background: #eef6ff;
  border: 1px solid #d8e7f7;
  border-radius: 14px;
  padding: 16px;
}

.metric-card span {
  display: block;
  color: #64748b;
  font-size: 13px;
}

.metric-card strong {
  display: block;
  margin-top: 5px;
  color: #0b3b75;
  font-size: 25px;
}

/* =========================================
   CONFIRMACIÓN DE CANJE
========================================= */

.redemption-confirm-box {
  margin-top: 24px;
  padding: 20px;

  background: #f4f9f6;

  border: 2px solid #c9e4d3;
  border-radius: 14px;
}

.redemption-confirm-box h2 {
  margin-top: 0;
  color: #155d36;
}


#confirmRedemptionBtn,
.confirm-redemption-btn {

  display: block !important;

  width: 100% !important;

  margin-top: 18px !important;

  padding: 15px 18px !important;

  background-color: #1f7a45 !important;

  color: #ffffff !important;

  border: 2px solid #1f7a45 !important;

  border-radius: 10px !important;

  font-size: 16px !important;

  font-weight: 700 !important;

  text-align: center !important;

  cursor: pointer !important;

  opacity: 1 !important;

  visibility: visible !important;
}


#confirmRedemptionBtn:hover,
.confirm-redemption-btn:hover {

  background-color: #155d36 !important;

  border-color: #155d36 !important;

  color: #ffffff !important;
}


#confirmRedemptionBtn:disabled {

  background-color: #94a3b8 !important;

  border-color: #94a3b8 !important;

  cursor: not-allowed !important;

}