:root{
  --bg:#0b0f19;
  --panel:#131a2a;
  --text:#eef2f5;
  --muted:#a6b0c3;
  --accent:#2563eb;
  --ok:#10b981;
  --warn:#f59e0b;
  --bad:#ef4444;
  --border:#223054;
  --focus:#60a5fa;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
header{display:flex;align-items:center;gap:1rem;padding:1rem 2rem;background:linear-gradient(180deg,#0b1020,#0b1020cc)}
header img{height:48px}
header .title{font-weight:700;font-size:1.25rem}
main{padding:2rem;max-width:1100px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.card{background:linear-gradient(180deg,#0d1225,#0a0f20);border:1px solid #1f2a44;border-radius:16px;padding:1rem;box-shadow:0 10px 30px #00000050}
.card h3{margin-top:0}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:12px;border:1px solid #334168;background:linear-gradient(180deg,#141d38,#0e152b);color:var(--text);cursor:pointer}
.btn.primary{border-color:var(--accent);}
.btn.ok{border-color:var(--ok)}
.btn.bad{border-color:var(--bad)}
.muted{color:var(--muted);font-size:.9rem}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form .row .col{display:flex;flex-direction:column}
input,select,textarea{background:#0b1328;border:1px solid #223054;border-radius:12px;color:var(--text);padding:.6rem}
table{width:100%;border-collapse:separate;border-spacing:0 8px}
th,td{text-align:left;padding:.6rem .8rem;background:#0c1429;border-top:1px solid #1f2e4d;border-bottom:1px solid #1f2e4d}
th:first-child,td:first-child{border-left:1px solid #1f2e4d;border-top-left-radius:12px;border-bottom-left-radius:12px}
th:last-child,td:last-child{border-right:1px solid #1f2e4d;border-top-right-radius:12px;border-bottom-right-radius:12px}
.status{padding:.2rem .5rem;border-radius:999px;border:1px solid #334168;font-size:.8rem}
.status.pending{border-color:var(--warn);}
.status.verified{border-color:var(--ok);}
.status.rejected{border-color:var(--bad);}
.flash{margin-bottom:1rem}
.flash .item{background:#0c1429;border:1px solid #334168;padding:.6rem 1rem;border-radius:12px;margin:.4rem 0}

/* Progress bar for ticket goal */
.progress{background:#0b1328;border:1px solid #223054;border-radius:999px;position:relative;height:14px;overflow:hidden}
.progress .bar{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#22c55e,#4f46e5);}
.progress .label{position:absolute;top:-26px;right:0;font-size:.85rem;color:var(--muted)}
.badge{display:inline-block;border:1px solid #334168;padding:.2rem .5rem;border-radius:999px;font-size:.8rem;color:var(--text)}

/* Prize image framing (no crop) */
.prize-frame{background:radial-gradient(1200px 400px at 50% -20%, #0e172e 0%, #0b1020 60%);border:1px solid #1f2a44;border-radius:16px;padding:8px;display:flex;justify-content:center;align-items:center}
.prize-img{max-width:100%;max-height:360px;object-fit:contain;display:block}
.prize-caption{color:var(--muted);font-size:.9rem;margin-top:.3rem}

/* Logo strip */
.logo-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:.4rem 0}
.logo-strip .bank{background:#0b1328;border:1px solid #223054;border-radius:10px;padding:6px 10px;display:flex;align-items:center;gap:8px}
.logo-strip img{height:20px} /* fallback */

/* Info blocks */
.info-block{background:linear-gradient(180deg,#0d1225,#0a0f20);border:1px solid #1f2a44;border-radius:16px;padding:1rem;margin-top:1rem}
.info-block h3{margin:.2rem 0 .6rem 0}
.info-block ol{margin:.4rem 0 .2rem 1rem}
.info-block li{margin:.2rem 0}
.trust-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:.4rem}
.badge.soft{border-color:#334168;background:#0b1328}

/* Clickable bank logos */
.bank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:.4rem 0}
.bank-option{position:relative;border:1px solid #223054;background:#0b1328;border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease}
.bank-option img{max-width:180px;max-height:80px;object-fit:contain;display:block;filter:saturate(1.05)}
.bank-option .caption{font-size:.9rem;color:var(--text)}
.bank-option input{position:absolute;inset:0;opacity:0;cursor:pointer}
.bank-option:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.bank-option.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,70,229,.3) inset}
@media (max-width:480px){ .bank-option img{max-width:150px;max-height:70px} }

/* Hide legacy bank <select> if bank grid is present */
.bank-legacy-select{display:none !important}
.bank-details-card p{margin:.25rem 0}

.copy-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.copy-pill{background:#0b1328;border:1px solid #223054;border-radius:999px;padding:.35rem .7rem;font-size:.9rem;cursor:pointer;user-select:none}
.copy-pill:hover{filter:brightness(1.1)}
.copy-muted{color:var(--muted)}


/* Safe-area support for iOS notch */
header, main, body { padding-left: max(env(safe-area-inset-left), 0); padding-right: max(env(safe-area-inset-right), 0); }
main { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

/* Bank cards for copy */
.bank-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:.6rem}
.bank-details-card{background:linear-gradient(180deg,#0d1225,#0a0f20);border:1px solid #1f2a44;border-radius:14px;padding:14px}
.bank-details-card .hdr{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.bank-details-card .hdr img{width:32px;height:32px}
.bank-details-card .label{font-size:.8rem;color:var(--muted);margin-right:.35rem}
.bank-details-card .value{font-weight:700}
.bank-details-card .copy-row{margin-top:.35rem}
.bank-details-card .btn-mini{padding:.45rem .7rem;border-radius:10px;border:1px solid #37446a;background:linear-gradient(180deg,#141d38,#0e152b);cursor:pointer}
.bank-details-card .btn-mini:active{transform:scale(.98)}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#0b1328;border:1px solid #223054;border-radius:12px;padding:.55rem .9rem;opacity:0;pointer-events:none;transition:transform .2s ease, opacity .2s ease;z-index:9999}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Bank icon chip */
.bank-details-card .hdr .icon-chip{
  width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  background:#ffffff;border-radius:16px; box-shadow:0 3px 16px rgba(0,0,0,.25);
  overflow:hidden; flex:0 0 auto;
}
.bank-details-card .hdr .icon-chip img{
  width:100%; height:100%; object-fit:cover; image-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  border-radius:16px;
}
@media (max-width:600px){
  .bank-details-card .hdr .icon-chip{ width:48px; height:48px; border-radius:12px; }
}

/* ===== Accessibility & Motion ===== */
:root { --focus: #93c5fd; --hc-border:#e5e7eb; --hc-text:#fff; --hc-bg:#0a0f20; }
:root.hc {
  --panel:#0e1530; --text:#ffffff; --muted:#c9d1e8; --accent:#a5b4fc;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
}
:root.hc .card, :root.hc .bank-details-card { border-color: var(--hc-border); }
:root.hc .copy-pill, :root.hc .btn-mini { border-color: var(--hc-border); }
:root.hc body { color: var(--hc-text); background: var(--hc-bg); }

/* Focus visible for keyboard */
.btn-mini:focus-visible, .copy-pill:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Hover / touch animation on bank icon */
.bank-details-card .hdr { gap: 12px; }
.bank-details-card .hdr .icon-chip { transition: transform .18s ease, box-shadow .18s ease; }
.bank-details-card:hover .hdr .icon-chip,
.bank-details-card:active .hdr .icon-chip { transform: translateY(-2px) scale(1.02); box-shadow:0 6px 24px rgba(0,0,0,.32); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* High-contrast toggle button */
.hc-toggle { display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--muted); cursor:pointer; user-select:none; }
.hc-toggle input { width:1.1rem; height:1.1rem; }
.hc-wrap { display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem; }

/* --- Fix bank icon sizing & layout --- */
.bank-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:.6rem}
.bank-details-card .hdr{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.bank-details-card .hdr .icon-chip{width:56px;height:56px;border-radius:14px}
@media (max-width:600px){ .bank-details-card .hdr .icon-chip{width:48px;height:48px;border-radius:12px} }
.bank-details-card .hdr .icon-chip img{display:block;width:100%;height:100%;object-fit:cover}
.bank-details-card .rowline{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.bank-details-card .label{min-width:auto}
.bank-details-card .value{word-break:break-word}
/* Safety net: any images inside bank cards should never overflow */
.bank-details-card img{max-width:100%;height:auto}


/* === Chrome-safe bank logos (desktop) === */
@media (min-width:768px){
  .logo-strip img{
    height:22px !important;
    width:auto !important;
    max-width:140px !important;
    object-fit:contain !important;
    image-rendering:auto; /* Chrome: evita pixelado raro al escalar */
    display:block !important;
  }
  .bank-details-card .hdr .icon-chip{
    width:56px !important; height:56px !important;
    border-radius:14px !important; overflow:hidden !important;
    background:#0b1328 !important; border:1px solid var(--border) !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    flex:0 0 auto !important;
  }
  .bank-details-card .hdr .icon-chip img{
    width:100% !important; height:100% !important;
    object-fit:contain !important; /* clave: no recorta logos en Chrome */
    image-rendering:auto;
    display:block !important;
  }
  .bank-option img{
    max-height:70px !important; max-width:220px !important;
    width:auto !important; height:auto !important; object-fit:contain !important; display:block !important;
  }
}
/* safety net */
.bank-details-card img{ max-width:100% !important; height:auto !important; }


/* --- Tweaks requested --- */
.bank-details-card .btn-mini,
.bank-details-card .btn-mini:visited{ color:#fff !important; }

/* Hide 'Copiar nombre' button if left in markup accidentally */
.bank-details-card .btn-mini.copy-name{ display:none !important; }

/* Larger select for bank and better readability */
select.bank-select{
  width:100%;
  height:52px;
  font-size:1rem;
  padding:12px 16px;
  border-radius:12px;
}
select.bank-select option{ font-size:1rem; padding:8px 10px; }


/* Organized actions grid beneath the bank section */
.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:end}
.actions-grid .field{display:flex;flex-direction:column}
.actions-grid .field-submit button{height:42px}
@media (max-width: 720px){
  .actions-grid{grid-template-columns:1fr}
  .actions-grid .field-submit button{width:100%}
}


/* Center the actions grid above bank section for symmetry */
.actions-grid{
  margin-top:1rem;
  margin-bottom:1.5rem;
  justify-items:center;
  text-align:left;
}
.actions-grid .field{
  width:100%;
  max-width:500px;
}
.actions-grid input[type="file"],
.actions-grid input[type="number"]{
  width:100%;
}
.actions-grid .field-submit button{
  width:100%;
}


/* === Payment form symmetric grid (override) === */
.actions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  max-width:1100px;      /* center the whole block */
  margin:1rem auto 1.5rem;
  align-items:end;
  justify-items:stretch; /* inputs align to columns */
  text-align:left;
}
.actions-grid .field{display:flex;flex-direction:column}
.actions-grid input[type="number"],
.actions-grid input[type="file"],
.actions-grid select{width:100%}
.actions-grid .field-submit{display:flex;justify-content:flex-end;align-items:flex-end}
.actions-grid .field-submit button{
  width:auto;            /* no full width */
  min-width:220px;       /* balanced size */
}
@media (max-width: 720px){
  .actions-grid{grid-template-columns:1fr}
  .actions-grid .field-submit{justify-content:stretch}
  .actions-grid .field-submit button{width:100%; min-width:0}
}


/* === Symmetric form layout with centered Enviar button === */
.actions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  max-width:1100px;
  margin:1.5rem auto 2rem;
  align-items:start;
}
.actions-grid .field{display:flex;flex-direction:column;align-items:flex-start}
.actions-grid .field-wide{}
.actions-grid .field-qty .send-wrap{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:.8rem;
}
.actions-grid .btn.big{
  font-size:1.05rem;
  padding:.75rem 2rem;
  background:linear-gradient(180deg,var(--accent),#1e40af);
  border:1px solid #3b82f6;
  box-shadow:0 0 18px #2563eb80;
  transition:all .25s ease;
}
.actions-grid .btn.big:hover{
  transform:scale(1.03);
  box-shadow:0 0 24px #3b82f680;
}
@media(max-width:720px){
  .actions-grid{grid-template-columns:1fr}
  .actions-grid .field-wide{grid-column:1}
}


/* === Turquoise click effect for Enviar button === */
.actions-grid .btn.big:active{
  background:linear-gradient(180deg,#06b6d4,#0e7490);
  transform:scale(0.97);
  box-shadow:0 0 10px #22d3ee80 inset, 0 0 20px #22d3ee80;
  border-color:#22d3ee;
}


/* === v8: One-line row (Cantidad, Monto, Voucher, Enviar) === */
.actions-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap:1rem;
  max-width: 1200px;
  margin:1.2rem auto 1.6rem;
  align-items:end;
}
.actions-grid .field{display:flex;flex-direction:column}
.actions-grid .field-submit{display:flex;justify-content:flex-end;align-items:end}
.actions-grid .field-submit button.btn.big{min-width:200px}
.actions-grid input[type="number"],
.actions-grid input[type="file"]{width:100%}
@media (max-width: 980px){
  .actions-grid{grid-template-columns: 1fr 1fr}
  .actions-grid .field-submit{justify-content:stretch}
  .actions-grid .field-submit button.btn.big{width:100%;min-width:0}
}
@media (max-width: 620px){
  .actions-grid{grid-template-columns: 1fr}
}

/* Floating WhatsApp button */
.whatsapp-float{
  position:fixed;right:18px;bottom:18px;
  width:56px;height:56px;border-radius:999px;
  background:#25D366;color:white;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:9999;border:1px solid #1da851;
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover{transform:scale(1.05);box-shadow:0 10px 28px rgba(0,0,0,.45)}
.whatsapp-float:active{transform:scale(.97)}