@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800&display=swap');


*{box-sizing:border-box}body{margin:0;font-family:"Roboto Condensed","Arial Narrow","Segoe UI",Arial,sans-serif;background:#f4f6f8;color:#18212b}
header{background:#101820;color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center}.brand{font-weight:800;letter-spacing:.8px}.topright{font-size:14px}.topright a{color:#fff}
main{max-width:850px;margin:0 auto;padding:18px}.card{background:#fff;border-radius:18px;padding:20px;margin:14px 0;box-shadow:0 4px 18px rgba(0,0,0,.06)}.narrow{max-width:520px;margin:30px auto}.hero{text-align:center;padding:40px 24px}.center{text-align:center}
h1,h2,h3{margin-top:0}label{display:block;font-weight:650;margin:12px 0}input,select{width:100%;padding:13px;border:1px solid #ccd3da;border-radius:10px;font-size:16px;margin-top:6px;background:#fff}
.btn{display:inline-block;border:0;border-radius:12px;padding:13px 17px;background:#101820;color:#fff;text-decoration:none;font-weight:700;font-size:15px;margin:7px 5px 0 0;cursor:pointer}.secondary{background:#e8edf2;color:#101820}.danger{background:#7a1e1e}.flash{background:#fff3c4;padding:13px;border-radius:12px;margin-bottom:12px}.big,.metric{font-size:34px;font-weight:800;margin:8px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.grid .card{margin:0}.qr{max-width:260px;width:100%;image-rendering:auto}.row{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #edf0f2;padding:10px 0;font-size:14px}.check{width:70px;height:70px;border-radius:50%;background:#dff5e7;color:#18723b;font-size:44px;line-height:70px;margin:0 auto 16px}.muted{color:#66717c}.success{border:1px solid #bddfc9}.successText{font-weight:700}
@media(max-width:640px){.grid{grid-template-columns:1fr}.topright{font-size:12px}.row{display:block}.row b{display:block;margin-top:5px}}


/* ===== CLIENT APP V2 ===== */
.client-app{max-width:680px;margin:0 auto;padding-bottom:92px}
.client-view{display:none}.client-view.active{display:block}
.client-hero{background:#101820;color:#fff;border-radius:24px;padding:26px;margin:6px 0 16px;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.client-hero h1{font-size:30px;margin:4px 0 5px}.client-hero p{margin:0;color:#cdd5dc}
.client-eyebrow{font-size:12px;font-weight:900;letter-spacing:1.1px;opacity:.7}
.client-savings{text-align:right;white-space:nowrap}.client-savings span{display:block;font-size:12px;color:#cdd5dc}.client-savings strong{display:block;font-size:28px;margin-top:4px}
.client-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.client-summary-card,.client-stat-card{background:#fff;border:0;border-radius:18px;padding:18px;text-align:left;box-shadow:0 4px 18px rgba(0,0,0,.05);color:#18212b}
button.client-summary-card{cursor:pointer}
.client-summary-card span,.client-stat-card span{font-size:13px;color:#66717c;font-weight:700}.client-summary-card strong,.client-stat-card strong{display:block;font-size:27px;margin:8px 0 4px}.client-summary-card small{color:#66717c;line-height:1.3}
.client-benefit-card{background:#edf8f0;border:1px solid #c8e5d0;border-radius:22px;padding:20px;margin:14px 0}
.client-card-label{font-size:12px;font-weight:900;letter-spacing:.9px;color:#46634e}
.client-benefit-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px}.client-benefit-amount{font-size:34px;font-weight:900}.client-muted{font-size:13px;color:#66717c;margin-top:3px}
.client-primary-btn{border:0;border-radius:13px;padding:13px 16px;background:#101820;color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.client-promo,.client-info-card,.client-list-card,.client-progress-card,.client-profile-card{background:#fff;border-radius:20px;padding:20px;margin:14px 0;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.client-promo strong{display:block;font-size:22px;margin:7px 0}.client-promo span{color:#66717c}.client-info-card p{margin-bottom:0;color:#66717c;line-height:1.45}
.client-section-head{padding:12px 4px 4px}.client-section-head h2{font-size:30px;margin:3px 0 0}
.client-progress-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.client-progress-top span{display:block;color:#66717c;font-size:13px}.client-progress-top strong{display:block;font-size:28px;margin-top:4px}
.client-progress-circle{width:68px;height:68px;border-radius:50%;background:#eef1f4;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900}
.client-progress-track{height:12px;background:#e8edf2;border-radius:999px;overflow:hidden;margin:20px 0 12px}.client-progress-fill{height:100%;background:#101820;border-radius:999px}
.client-progress-card p{margin-bottom:0;color:#66717c}
.client-total-card{background:#101820;color:#fff;border-radius:24px;padding:26px;margin:14px 0;text-align:center}.client-total-card span{display:block;color:#cdd5dc;font-size:13px}.client-total-card strong{display:block;font-size:46px;margin:8px 0}.client-total-card small{color:#cdd5dc}
.client-list-card h3{margin-bottom:8px}.client-history-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid #edf0f2}.client-history-row:last-child{border-bottom:0}.client-history-row strong{display:block}.client-history-row span{display:block;color:#66717c;font-size:12px;margin-top:3px}.client-history-badge{font-weight:800;font-size:13px;background:#eef1f4;padding:7px 10px;border-radius:10px;white-space:nowrap}.client-money{font-size:18px;font-weight:900;white-space:nowrap}.client-empty{padding:18px 0;color:#66717c}
.client-profile-card{text-align:center}.client-avatar{width:78px;height:78px;border-radius:50%;background:#101820;color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:900;margin:0 auto 12px}.client-profile-card h3{font-size:22px}
.client-profile-row{display:flex;justify-content:space-between;gap:16px;text-align:left;padding:13px 0;border-bottom:1px solid #edf0f2}.client-profile-row span{color:#66717c}.client-profile-row strong{text-align:right;word-break:break-word}
.client-logout{display:block;margin-top:22px;padding:13px;border-radius:12px;background:#eef1f4;color:#18212b;text-decoration:none;font-weight:800}
.client-bottom-nav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(640px,calc(100% - 24px));background:#fff;border:1px solid #e1e6ea;border-radius:20px;padding:7px;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 8px 30px rgba(0,0,0,.14);z-index:100}
.client-bottom-nav button{border:0;background:transparent;color:#7a858e;border-radius:14px;padding:8px 4px;min-height:52px;font-weight:700;font-size:11px;cursor:pointer}.client-bottom-nav button.active{background:#101820;color:#fff}.client-bottom-nav span{display:block}.client-bottom-nav .nav-icon{font-size:20px;line-height:20px;margin-bottom:3px}
@media(max-width:560px){
  main{padding:12px}
  .client-hero{display:block;padding:22px}.client-savings{text-align:left;margin-top:20px}.client-savings strong{font-size:34px}
  .client-grid-two{grid-template-columns:1fr 1fr}
  .client-summary-card,.client-stat-card{padding:15px}.client-summary-card strong,.client-stat-card strong{font-size:23px}
  .client-benefit-row{display:block}.client-benefit-row form{margin-top:14px}.client-primary-btn{width:100%}
  .client-total-card strong{font-size:40px}
}


/* ===== BENEFICIOS GO / GRUPO ORTEGA BRAND ===== */
:root {
  --go-blue: #07559A;
  --go-blue-dark: #084A86;
  --go-blue-bright: #0870C1;
  --go-white: #FFFFFF;
  --go-bg: #F4F7FB;
  --go-text: #0B2F57;
  --go-muted: #637487;
}

body {
  background: var(--go-bg);
  color: var(--go-text);
}

header {
  background: var(--go-white);
  color: var(--go-blue-dark);
  border-bottom: 1px solid #dce7f2;
}

.topright a {
  color: var(--go-blue);
}

.brand-go {
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:0;
}

.brand-go img {
  width:86px;
  height:32px;
  object-fit:contain;
}

.brand-go span {
  font-weight:900;
  color:var(--go-blue-dark);
}

.client-hero {
  background: linear-gradient(135deg, var(--go-blue-dark), var(--go-blue-bright));
  color:var(--go-white);
}

.go-hero-content {
  min-width:0;
}

.go-client-logo {
  width:118px;
  max-height:52px;
  object-fit:contain;
  object-position:left center;
  background:#fff;
  border-radius:12px;
  padding:7px 10px;
  margin-bottom:16px;
}

.client-primary-btn,
.btn {
  background: var(--go-blue);
  color: var(--go-white);
}

.client-bottom-nav button.active {
  background: var(--go-blue);
  color:var(--go-white);
}

.client-progress-fill {
  background: linear-gradient(90deg, var(--go-blue), var(--go-blue-bright));
}

.client-total-card {
  background: linear-gradient(135deg, var(--go-blue-dark), var(--go-blue-bright));
}

.client-benefit-card {
  background:#eef6ff;
  border-color:#c6dcf3;
}

.client-card-label {
  color:var(--go-blue-dark);
}

.client-progress-circle {
  color:var(--go-blue);
  background:#edf5fd;
}

.client-avatar {
  background:var(--go-blue);
}

.client-money {
  color:var(--go-blue-dark);
}

.check {
  background:#eaf4ff;
  color:var(--go-blue);
}

@media(max-width:560px) {
  .brand-go img {
    width:72px;
  }
  .brand-go span {
    font-size:14px;
  }
}


/* ===== Ajuste logo Beneficios GO ===== */
.brand-go {
  gap: 8px;
}
.brand-go img {
  width: 46px !important;
  height: 24px !important;
  max-height: 24px !important;
  object-fit: contain !important;
}
.brand-go span {
  font-size: 15px !important;
  line-height: 1.1;
}
.go-client-logo {
  display: none !important;
}
@media(max-width:560px) {
  .brand-go img {
    width: 40px !important;
    height: 21px !important;
  }
  .brand-go span {
    font-size: 14px !important;
  }
}


/* ===== Inicio Beneficios GO: promoción + última carga ===== */
.go-feature-card,
.go-last-load-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 20px;
  margin: 14px 0;
  box-shadow: 0 4px 18px rgba(7, 85, 154, .08);
}

.go-feature-label {
  color: var(--go-blue-dark, #084A86);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.go-feature-body {
  display: flex;
  align-items: center;
  gap: 16px;
}

.go-feature-icon,
.go-load-icon {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #eaf4ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.go-feature-icon svg,
.go-load-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: #07559A;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.go-feature-copy {
  min-width: 0;
}

.go-feature-copy strong {
  display: block;
  color: #10253d;
  font-size: 19px;
  line-height: 1.2;
  margin-bottom: 6px;
}

.go-feature-copy p {
  color: #637487;
  margin: 0 0 10px;
  line-height: 1.45;
  font-size: 14px;
}

.go-feature-copy p b {
  color: #10253d;
}

.go-feature-pill {
  display: inline-block;
  background: #eaf4ff;
  color: #07559A;
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.go-last-load-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.go-load-icon {
  width: 58px;
  height: 58px;
}

.go-load-icon svg {
  width: 31px;
  height: 31px;
}

.go-last-load-copy {
  min-width: 0;
  flex: 1;
}

.go-last-load-copy span,
.go-last-load-copy small {
  display: block;
  color: #637487;
  font-size: 12px;
}

.go-last-load-copy strong {
  display: block;
  color: #10253d;
  font-size: 17px;
  margin: 3px 0;
}

.go-load-arrow {
  border: 0;
  background: transparent;
  color: #788795;
  font-size: 34px;
  line-height: 1;
  padding: 8px;
  cursor: pointer;
}

@media(max-width: 420px) {
  .go-feature-card,
  .go-last-load-card {
    padding: 18px;
  }

  .go-feature-icon {
    width: 58px;
    height: 58px;
  }

  .go-feature-copy strong {
    font-size: 17px;
  }

  .go-feature-copy p {
    font-size: 13px;
  }
}


/* ===== FIX ICONOS BENEFICIOS GO ===== */
.go-feature-icon,
.go-load-icon {
  background: #edf6ff !important;
  border: 1px solid #d7e8f7 !important;
  color: #07559A !important;
}

.go-feature-icon {
  width: 52px !important;
  height: 52px !important;
}

.go-load-icon {
  width: 48px !important;
  height: 48px !important;
}

.go-feature-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #07559A !important;
  fill: none !important;
  stroke-width: 1.7 !important;
}

.go-load-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #07559A !important;
  fill: none !important;
  stroke-width: 1.7 !important;
}

.go-feature-icon svg *,
.go-load-icon svg * {
  stroke: #07559A !important;
  fill: none !important;
}

.go-load-arrow {
  color: #6f8192 !important;
  font-size: 28px !important;
  padding: 4px 6px !important;
}

@media(max-width:420px) {
  .go-feature-icon {
    width: 46px !important;
    height: 46px !important;
  }

  .go-load-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .go-feature-icon svg {
    width: 21px !important;
    height: 21px !important;
  }

  .go-load-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
}


/* ===== Barra GO con botón QR central ===== */
.go-bottom-nav {
  grid-template-columns: 1fr 1fr 1.18fr 1fr 1fr !important;
  overflow: visible !important;
  min-height: 76px;
  padding: 8px !important;
}

.go-nav-item {
  border: 0 !important;
  background: transparent !important;
  color: #7b8793 !important;
  padding: 8px 2px !important;
  min-height: 54px !important;
}

.go-nav-item.active {
  color: #07559A !important;
  background: #edf5fd !important;
}

.go-nav-icon {
  display: block;
  font-size: 21px;
  font-weight: 800;
  line-height: 21px;
  margin-bottom: 4px;
}

.go-nav-item > span:last-child,
.go-qr-main > span:last-child {
  font-size: 10px;
  font-weight: 800;
}

.go-qr-main {
  position: relative;
  top: -28px;
  border: 0 !important;
  background: transparent !important;
  color: #07559A !important;
  padding: 0 !important;
  min-height: 72px !important;
  cursor: pointer;
}

.go-qr-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto 3px;
  background: linear-gradient(145deg, #07559A, #0870C1);
  border: 7px solid #f4f7fb;
  box-shadow: 0 5px 15px rgba(7,85,154,.30);
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.go-qr-circle svg {
  width: 31px !important;
  height: 31px !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.go-qr-circle svg * {
  stroke: #fff !important;
  fill: none !important;
}

.go-qr-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  background: rgba(5,22,39,.72);
  padding: 14px;
  align-items: flex-end;
  justify-content: center;
}

.go-qr-modal.open {
  display: flex;
}

.go-qr-sheet {
  width: min(100%, 520px);
  background: #fff;
  border-radius: 24px;
  padding: 18px;
}

.go-qr-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.go-qr-head strong {
  display: block;
  color: #084A86;
  font-size: 20px;
}

.go-qr-head span {
  display: block;
  color: #637487;
  font-size: 13px;
  margin-top: 3px;
}

.go-qr-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #edf5fd;
  color: #07559A;
  font-size: 25px;
}

.go-qr-reader {
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #07131f;
}

#qrReader video {
  width: 100% !important;
  border-radius: 18px;
}

.go-qr-status {
  color: #637487;
  text-align: center;
  font-size: 13px;
  margin: 12px 0 0;
}

@media(max-width:390px) {
  .go-qr-circle {
    width: 64px;
    height: 64px;
  }
  .go-qr-main {
    top: -24px;
  }
  .go-nav-item > span:last-child,
  .go-qr-main > span:last-child {
    font-size: 9px;
  }
}


/* ===== Beneficios GO: menú inferior compacto v2 ===== */
.go-bottom-nav {
  grid-template-columns: 1fr 1fr 1.05fr 1fr 1fr !important;
  min-height: 64px !important;
  height: 64px !important;
  padding: 6px 8px !important;
  border-radius: 19px !important;
}

.go-nav-item {
  min-height: 48px !important;
  padding: 5px 2px !important;
  border-radius: 12px !important;
}

.go-nav-icon {
  font-size: 18px !important;
  line-height: 18px !important;
  margin-bottom: 2px !important;
}

.go-nav-item > span:last-child,
.go-qr-main > span:last-child {
  font-size: 9px !important;
  line-height: 11px !important;
}

.go-qr-main {
  top: -18px !important;
  min-height: 60px !important;
}

.go-qr-circle {
  width: 56px !important;
  height: 56px !important;
  border-width: 5px !important;
  margin-bottom: 2px !important;
}

.go-qr-circle svg {
  width: 25px !important;
  height: 25px !important;
}

/* ===== Canje de beneficio compacto ===== */
.go-reward-card {
  background: #ffffff !important;
  border: 1px solid #cfe2f5 !important;
  border-radius: 20px !important;
  padding: 17px !important;
  margin: 14px 0 !important;
  box-shadow: 0 4px 16px rgba(7,85,154,.08) !important;
}

.go-reward-small {
  margin-top: 12px !important;
}

.go-reward-label {
  color: #07559A !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .9px !important;
  margin-bottom: 11px !important;
}

.go-reward-compact {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.go-reward-main {
  min-width: 0 !important;
}

.go-reward-main span,
.go-reward-main small {
  display: block !important;
  color: #637487 !important;
  font-size: 12px !important;
}

.go-reward-main strong {
  display: block !important;
  color: #084A86 !important;
  font-size: 29px !important;
  line-height: 1.05 !important;
  margin: 3px 0 4px !important;
}

.go-redeem-btn {
  border: 0 !important;
  border-radius: 12px !important;
  background: #07559A !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  line-height: 16px !important;
  min-height: 42px !important;
  padding: 11px 14px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

@media(max-width: 430px) {
  .go-bottom-nav {
    min-height: 60px !important;
    height: 60px !important;
  }

  .go-qr-circle {
    width: 52px !important;
    height: 52px !important;
  }

  .go-qr-main {
    top: -16px !important;
  }

  .go-reward-compact {
    align-items: flex-end !important;
  }

  .go-reward-main strong {
    font-size: 26px !important;
  }

  .go-redeem-btn {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
}


/* ===== iOS PWA safe areas ===== */
html {
  background: #f4f7fb;
}

body {
  min-height: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

header {
  padding-top: 16px !important;
}

/* Cuando corre instalada como PWA, iOS necesita un poco más de aire arriba */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  header {
    padding-top: 12px !important;
  }

  main {
    padding-top: 14px !important;
  }

  .client-bottom-nav {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .client-app {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Safari/iPhone también respeta el área segura si el viewport usa viewport-fit=cover */
@supports (padding: max(0px)) {
  .client-bottom-nav {
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* Mensaje de sucursal: mismo formato que "Ahorrá en cada carga" */
.go-client-message-card .go-feature-copy .go-client-message-text {
  display: block;
  white-space: pre-line;
}


button,input,select,textarea{
  font-family:"Roboto Condensed","Arial Narrow","Segoe UI",Arial,sans-serif;
}


/* ===== BENEFICIOS GO · TEMA GLOBAL CLARO / OSCURO ===== */
:root{
  color-scheme:light;
  --bg:#f4f6f8;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef3f7;
  --text:#18212b;
  --text-soft:#66717c;
  --border:#dfe6ec;
  --border-soft:#edf0f2;
  --header:#ffffff;
  --header-text:#07559A;
  --primary:#07559A;
  --primary-contrast:#ffffff;
  --shadow:0 4px 18px rgba(0,0,0,.06);
  --shadow-strong:0 8px 30px rgba(0,0,0,.12);
  --input-bg:#ffffff;
  --success-bg:#edf8f0;
  --success-border:#c8e5d0;
  --danger-bg:#fff0f0;
  --flash-bg:#fff3c4;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f1519;
  --surface:#151e23;
  --surface-2:#18242a;
  --surface-3:#202c33;
  --text:#edf3f6;
  --text-soft:#94a4ad;
  --border:#2a3941;
  --border-soft:#26343b;
  --header:#121c21;
  --header-text:#eaf2f6;
  --primary:#2f8db0;
  --primary-contrast:#061015;
  --shadow:0 5px 20px rgba(0,0,0,.22);
  --shadow-strong:0 10px 36px rgba(0,0,0,.34);
  --input-bg:#121b20;
  --success-bg:#14271e;
  --success-border:#28583d;
  --danger-bg:#2a1719;
  --flash-bg:#3a3215;
}

html,
body{
  background:var(--bg);
  color:var(--text);
  transition:background-color .18s ease,color .18s ease;
}

header{
  background:var(--header) !important;
  color:var(--header-text) !important;
  border-bottom:1px solid var(--border);
}

header .brand,
header .brand span,
header .topright,
header .topright a{
  color:var(--header-text) !important;
}

.card,
.client-summary-card,
.client-stat-card,
.client-promo,
.client-info-card,
.client-list-card,
.client-progress-card,
.client-profile-card,
.admin-menu-card,
.admin-report-link,
.stat-card,
.kpi-card,
.panel-card,
.insight-card{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow) !important;
}

input,
select,
textarea{
  background:var(--input-bg) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

input::placeholder,
textarea::placeholder{
  color:var(--text-soft);
}

label,
.muted,
.client-muted,
.client-summary-card span,
.client-stat-card span,
.client-summary-card small,
.client-history-row span,
.client-profile-row span,
.stat-note,
.panel-note,
.kpi-note,
.insight-sub{
  color:var(--text-soft) !important;
}

.row,
.client-profile-row,
.client-history-row{
  border-color:var(--border-soft) !important;
}

.secondary,
.client-logout{
  background:var(--surface-3) !important;
  color:var(--text) !important;
}

.flash{
  background:var(--flash-bg) !important;
  color:var(--text) !important;
}

.client-benefit-card{
  background:var(--success-bg) !important;
  border-color:var(--success-border) !important;
  color:var(--text) !important;
}

.client-bottom-nav{
  background:var(--surface) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow-strong) !important;
}

.client-bottom-nav button{
  color:var(--text-soft) !important;
}

.client-bottom-nav button.active{
  background:var(--primary) !important;
  color:#fff !important;
}

.client-hero,
.client-total-card{
  background:linear-gradient(135deg,#07559A,#0c78bd) !important;
  color:#fff !important;
}

html[data-theme="dark"] .client-hero,
html[data-theme="dark"] .client-total-card{
  background:linear-gradient(135deg,#06385d,#07559A) !important;
}

a{
  color:var(--primary);
}

.btn,
.login-submit,
.public-create-account{
  background:var(--primary) !important;
  color:#fff !important;
}

table{
  color:var(--text);
}

th,
td{
  border-color:var(--border) !important;
}

thead{
  background:var(--surface-2);
}

hr{
  border-color:var(--border);
}

/* Toggle claro/oscuro */
.theme-toggle{
  width:38px;
  height:38px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--header-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease,background-color .18s ease,border-color .18s ease;
}

.theme-toggle:hover{
  transform:translateY(-1px);
}

.theme-toggle:active{
  transform:scale(.94);
}

.theme-toggle svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.theme-toggle .theme-sun{display:none}
html[data-theme="dark"] .theme-toggle .theme-moon{display:none}
html[data-theme="dark"] .theme-toggle .theme-sun{display:block}

.topright{
  display:flex;
  align-items:center;
  gap:12px;
}

@media(max-width:560px){
  .theme-toggle{
    width:34px;
    height:34px;
  }
  .topright{
    gap:8px;
  }
}

/* Evita parpadeo blanco en PWA al abrir modo oscuro */
html[data-theme="dark"] body{
  background:#0f1519;
}


/* Barra superior con la misma tipografía global */
header,
header .brand,
header .brand span,
header .topright,
header .topright a,
.public-auth-links,
.public-auth-links a{
  font-family:"Roboto Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
}
header .brand span{
  font-weight:700 !important;
  letter-spacing:.01em !important;
}


/* ===== DARK MODE · CONTRASTE PROFESIONAL ===== */
html[data-theme="dark"] body{
  background:#0d1418 !important;
  color:#eef3f6 !important;
}

/* Texto principal */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .big,
html[data-theme="dark"] .admin-menu-card strong,
html[data-theme="dark"] .admin-section-head h2,
html[data-theme="dark"] .client-section-head h2{
  color:#eef3f6 !important;
}

/* Texto secundario */
html[data-theme="dark"] .muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .client-muted,
html[data-theme="dark"] .admin-menu-card span,
html[data-theme="dark"] .admin-menu-card p,
html[data-theme="dark"] .admin-report-link span{
  color:#93a5b0 !important;
}

/* Tarjetas y paneles */
html[data-theme="dark"] .card,
html[data-theme="dark"] .admin-menu-card,
html[data-theme="dark"] .admin-report-link,
html[data-theme="dark"] .client-summary-card,
html[data-theme="dark"] .client-stat-card,
html[data-theme="dark"] .client-promo,
html[data-theme="dark"] .client-info-card,
html[data-theme="dark"] .client-list-card,
html[data-theme="dark"] .client-progress-card,
html[data-theme="dark"] .client-profile-card{
  background:#151f24 !important;
  color:#eef3f6 !important;
  border-color:#2a3a42 !important;
}

/* Panel sucursal: antes quedaba blanco */
html[data-theme="dark"] .admin-branch-bar{
  background:#151f24 !important;
  color:#eef3f6 !important;
  border-color:#2b7fba !important;
  box-shadow:0 6px 24px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] .admin-branch-label{
  color:#8ea5b5 !important;
}

html[data-theme="dark"] .admin-branch-tools > summary{
  color:#56a8df !important;
}

/* Selects / inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#10191e !important;
  color:#eef3f6 !important;
  border-color:#34454e !important;
}

html[data-theme="dark"] select option{
  background:#10191e;
  color:#eef3f6;
}

/* Links y títulos azules: más luminosos en dark */
html[data-theme="dark"] a:not(.btn):not(.public-create-account),
html[data-theme="dark"] .admin-menu-card strong,
html[data-theme="dark"] .admin-report-link,
html[data-theme="dark"] .client-card-label{
  color:#5db2e8 !important;
}

/* Iconos de menú */
html[data-theme="dark"] .admin-menu-icon{
  background:#eaf4fb !important;
  color:#07559A !important;
}

/* Métricas superiores */
html[data-theme="dark"] .admin-metric-link{
  background:#151f24 !important;
  color:#eef3f6 !important;
}

/* Navegación inferior cliente */
html[data-theme="dark"] .client-bottom-nav{
  background:#131d22 !important;
  border-color:#2c3b43 !important;
}
html[data-theme="dark"] .client-bottom-nav button{
  color:#95a6b0 !important;
}
html[data-theme="dark"] .client-bottom-nav button.active{
  color:#fff !important;
}

/* Botones secundarios */
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .client-logout{
  background:#26343b !important;
  color:#eef3f6 !important;
}

/* Tablas */
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td{
  color:#eaf0f3 !important;
  border-color:#2b3a42 !important;
}
html[data-theme="dark"] thead{
  background:#18252b !important;
}

/* Login y páginas públicas siempre quedan claras porque base fuerza data-theme=light */

html[data-theme="dark"] header{
  background:#111c21 !important;
  border-bottom-color:#2a3941 !important;
}
html[data-theme="dark"] header .brand,
html[data-theme="dark"] header .brand span,
html[data-theme="dark"] header .topright,
html[data-theme="dark"] header .topright a{
  color:#edf3f6 !important;
}



/* ===== AJUSTES FINALES DE CONTRASTE ===== */

/* Botón Crear cuenta: texto siempre blanco */
header .public-auth-links .public-create-account,
header .public-auth-links .public-create-account:link,
header .public-auth-links .public-create-account:visited{
  color:#fff !important;
}

/* Cliente · modo oscuro */
html[data-theme="dark"] .go-feature-card,
html[data-theme="dark"] .go-last-load-card{
  background:#151f24 !important;
  color:#eef3f6 !important;
  border:1px solid #2a3a42 !important;
  box-shadow:0 5px 18px rgba(0,0,0,.20) !important;
}

html[data-theme="dark"] .go-feature-label{
  color:#69b7e8 !important;
}

html[data-theme="dark"] .go-feature-copy strong,
html[data-theme="dark"] .go-feature-copy p b,
html[data-theme="dark"] .go-last-load-copy strong,
html[data-theme="dark"] .go-client-message-text{
  color:#eef3f6 !important;
}

html[data-theme="dark"] .go-feature-copy p,
html[data-theme="dark"] .go-last-load-copy span,
html[data-theme="dark"] .go-last-load-copy small{
  color:#9aabb5 !important;
}

html[data-theme="dark"] .go-feature-pill{
  background:#173149 !important;
  color:#71bcec !important;
}

html[data-theme="dark"] .client-progress-circle{
  background:#eaf4ff !important;
  color:#07559A !important;
}

html[data-theme="dark"] .client-progress-track{
  background:#34444d !important;
}

html[data-theme="dark"] .client-progress-fill{
  background:#0d79c9 !important;
}

html[data-theme="dark"] .client-history-badge{
  background:#eaf4ff !important;
  color:#07559A !important;
}

html[data-theme="dark"] .client-history-row strong{
  color:#eef3f6 !important;
}

html[data-theme="dark"] .client-history-row span{
  color:#9aabb5 !important;
}

/* Catálogo / premios */
html[data-theme="dark"] .catalog-reward-card,
html[data-theme="dark"] .reward-catalog-card,
html[data-theme="dark"] .catalog-promo-item{
  background:#182329 !important;
  border-color:#2d3d45 !important;
}

html[data-theme="dark"] .catalog-reward-title,
html[data-theme="dark"] .reward-catalog-copy strong,
html[data-theme="dark"] .catalog-promo-copy strong,
html[data-theme="dark"] .catalog-promo-item strong{
  color:#eef3f6 !important;
}

html[data-theme="dark"] .catalog-reward-description,
html[data-theme="dark"] .catalog-promo-copy p,
html[data-theme="dark"] .reward-catalog-copy p,
html[data-theme="dark"] .reward-catalog-copy small{
  color:#9aabb5 !important;
}

html[data-theme="dark"] .catalog-reward-cost,
html[data-theme="dark"] .reward-catalog-copy span,
html[data-theme="dark"] .catalog-promo-item small{
  color:#68b7e8 !important;
}

/* Estadísticas · modo oscuro */
html[data-theme="dark"] .stats-shell,
html[data-theme="dark"] .stats-title-wrap h2,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .kpi-value,
html[data-theme="dark"] .insight-main,
html[data-theme="dark"] .compare-value,
html[data-theme="dark"] .fidelity-copy strong{
  color:#eef3f6 !important;
}

html[data-theme="dark"] .stats-subtitle,
html[data-theme="dark"] .panel-note,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat-note,
html[data-theme="dark"] .kpi-label,
html[data-theme="dark"] .kpi-note,
html[data-theme="dark"] .insight-label,
html[data-theme="dark"] .insight-sub,
html[data-theme="dark"] .compare-label,
html[data-theme="dark"] .fidelity-copy span,
html[data-theme="dark"] .chart-legend{
  color:#9aabb5 !important;
}

html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .insight-card{
  background:#151f24 !important;
  border-color:#2a3a42 !important;
  box-shadow:0 6px 22px rgba(0,0,0,.20) !important;
}

html[data-theme="dark"] .fidelity-badge{
  background:#18252b !important;
  border-color:#2d3d45 !important;
}

html[data-theme="dark"] .compare-track{
  background:#2c3b43 !important;
}

html[data-theme="dark"] #activityChart text{
  fill:#9aabb5 !important;
}

html[data-theme="dark"] #activityChart line{
  stroke:#2b3a42 !important;
}

/* Barra superior siempre usa la tipografía global */
header,
header *{
  font-family:"Roboto Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
}


/* Logo global: siempre clickeable y directo al inicio del rol */
.brand-home-link{
  display:flex;
  align-items:center;
  text-decoration:none !important;
  color:inherit;
  position:relative;
  z-index:20;
  cursor:pointer;
  pointer-events:auto !important;
}
.brand-home-link img,
.brand-home-link span{
  pointer-events:none;
}


/* ===== PERFIL PERSONALIZABLE ===== */
.profile-avatar-wrap{position:relative;width:92px;height:92px;margin:0 auto 10px}
.profile-avatar-button{width:92px!important;height:92px!important;padding:0!important;border:0!important;overflow:hidden;cursor:pointer}
.profile-avatar-button img{width:100%;height:100%;object-fit:cover;display:block}
.profile-avatar-plus{position:absolute;right:-2px;bottom:2px;width:30px;height:30px;border-radius:50%;border:3px solid var(--surface,#fff);background:#07559A;color:#fff;font-size:22px;font-weight:800;line-height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.profile-picture-box{display:none;margin:14px 0 18px;padding:16px;border:1px solid var(--border,#dfe6ec);border-radius:16px;background:var(--surface-2,#f8fafc)}
.profile-picture-box.open{display:block}
.profile-picture-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px;text-align:left}
.profile-picture-head strong{display:block}
.profile-picture-head span{display:block;color:var(--text-soft,#66717c);font-size:13px;margin-top:2px}
.profile-picture-head>button{border:0;background:transparent;color:var(--text-soft,#66717c);font-size:23px;cursor:pointer}
.profile-picture-upload input{display:none}
.profile-upload-btn{display:block;text-align:center;background:#07559A;color:#fff!important;padding:11px 14px;border-radius:11px;font-weight:800;cursor:pointer}
.profile-avatar-options{display:grid;grid-template-columns:repeat(4,54px);justify-content:center;gap:12px;margin:16px 0}
.profile-avatar-options form{margin:0}
.preset-avatar{width:54px;height:54px;border-radius:50%;border:3px solid rgba(255,255,255,.85);padding:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:21px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.profile-avatar-button .preset-avatar{width:100%;height:100%;border:0;font-size:34px}
.preset-go-blue{background:linear-gradient(135deg,#07559A,#2d9ee0)}
.preset-go-sky{background:linear-gradient(135deg,#45b7e8,#176da5)}
.preset-go-navy{background:linear-gradient(135deg,#102d4f,#07559A)}
.preset-go-mint{background:linear-gradient(135deg,#28a98b,#087d78)}
.preset-go-coral{background:linear-gradient(135deg,#ee7d68,#c44f62)}
.preset-go-violet{background:linear-gradient(135deg,#7667d8,#4d3ba7)}
.preset-go-sun{background:linear-gradient(135deg,#e6a82c,#d56b2f)}
.preset-go-slate{background:linear-gradient(135deg,#647786,#344650)}
.profile-remove-picture{border:0;background:transparent;color:#b43c45;font-weight:800;cursor:pointer}

/* ===== MENSAJES / ESTADOS: CONTRASTE CONSISTENTE ===== */
.flash{border:1px solid #d9c56c!important;background:#fff5c9!important;color:#493d0c!important;border-radius:12px!important;font-weight:700}
html[data-theme="dark"] .flash{background:#2b2716!important;border-color:#6b5b22!important;color:#ffe895!important}

/* Estados y avisos de cliente/playero */
html[data-theme="dark"] .status-card,
html[data-theme="dark"] .request-card,
html[data-theme="dark"] .pending-card,
html[data-theme="dark"] .success-card,
html[data-theme="dark"] .employee-request,
html[data-theme="dark"] .employee-card,
html[data-theme="dark"] .redeem-status-card,
html[data-theme="dark"] .scan-status-card{
  background:#151f24!important;color:#eef3f6!important;border-color:#2a3a42!important
}
html[data-theme="dark"] .status-card strong,
html[data-theme="dark"] .request-card strong,
html[data-theme="dark"] .pending-card strong,
html[data-theme="dark"] .success-card strong,
html[data-theme="dark"] .employee-request strong,
html[data-theme="dark"] .redeem-status-card strong{
  color:#eef3f6!important
}
html[data-theme="dark"] .status-card span,
html[data-theme="dark"] .status-card p,
html[data-theme="dark"] .request-card span,
html[data-theme="dark"] .request-card p,
html[data-theme="dark"] .pending-card span,
html[data-theme="dark"] .pending-card p,
html[data-theme="dark"] .employee-request span,
html[data-theme="dark"] .employee-request p{
  color:#9fb0ba!important
}
html[data-theme="dark"] .profile-avatar-plus{border-color:#151f24}

html[data-theme="dark"] .client-view [style*="background:#fff"],
html[data-theme="dark"] .employee-shell [style*="background:#fff"],
html[data-theme="dark"] .employee-wrap [style*="background:#fff"]{
  background:#151f24!important;color:#eef3f6!important;border-color:#2a3a42!important
}


/* ===== AVATARES GRÁFICOS DE PERFIL ===== */
.profile-preset-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}

.preset-avatar-photo{
  overflow:hidden;
  background:#eef4f8 !important;
  border:3px solid #fff !important;
  padding:0 !important;
}

.preset-avatar-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
  pointer-events:none;
}

.profile-avatar-options{
  grid-template-columns:repeat(4,58px) !important;
  gap:13px !important;
}

.profile-avatar-options .preset-avatar{
  width:58px !important;
  height:58px !important;
}

html[data-theme="dark"] .preset-avatar-photo{
  border-color:#2a3941 !important;
  background:#182329 !important;
}

@media(max-width:390px){
  .profile-avatar-options{
    grid-template-columns:repeat(4,54px) !important;
    gap:10px !important;
  }
  .profile-avatar-options .preset-avatar{
    width:54px !important;
    height:54px !important;
  }
}