.mp-logo {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  visibility: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  opacity: 0 !important;
}
  .legend {
    display: none !important;
  }
:root{
  --bg:#0a0d12; --paper:#0f141b; --ink:#e9eef5; --muted:#a8b3c1; --line:#213041;
  --brand:#117a37; --accent:#b41027; --gold:#F2C94C;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui}
a{color:inherit;text-decoration:none}
/* === 2025-08-21: CheckoutAPI Brick — mostrar botón externo (estilizado) ===
   Dejamos visible el botón "Pagar con Mercado Pago" para que no se vea gris si aparece.
   El pago igual sucede dentro del Brick; este botón actúa como CTA visual.
*/
.dialog .mercadopago-button { display: inline-flex !important; }

/* === Fallback para botón plano sin clase (Safari/iOS) =====================
   Si el HTML trae <input type="button" value="Pagar con Mercado Pago"> sin
   clase `.mercadopago-button`, lo estilizamos igual que el botón oficial. */
.dialog input[type="button"][value^="Pagar con Mercado Pago"],
.dialog input[type="submit"][value^="Pagar con Mercado Pago"]{
  -webkit-appearance:none; appearance:none;
  --mp-yellow:#ffe600;
  background:var(--mp-yellow) !important;
  color:#111 !important;
  border:1px solid #e5d200 !important;
  border-radius:38px !important;
  padding:16px 22px !important;
  padding-left:22px !important;
  font-weight:800 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  width:100% !important;
  line-height:1 !important;
  box-shadow:0 4px 10px -2px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.25) !important;
}
.dialog input[type="button"][value^="Pagar con Mercado Pago"]::before,
.dialog input[type="submit"][value^="Pagar con Mercado Pago"]::before{
  content:none !important;
  display:none !important;
  width:0 !important; height:0 !important;
  background:none !important;
}
.dialog input[type="button"][value^="Pagar con Mercado Pago"]:disabled,
.dialog input[type="submit"][value^="Pagar con Mercado Pago"]:disabled{
  opacity:.6; cursor:not-allowed; box-shadow:none !important;
}
/* ---------- HOTFIX 2025-08-20: Responsive y Bricks MP ---------- */
/* Evita que imágenes fuercen zoom/overflow en móviles */
img { max-width: 100%; height: auto; }

/* Contenedores de MP Bricks al ancho del viewport, con límite cómodo */
#card_payment_container,
#wallet_container {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
/* iframes de Bricks deben respetar el 100% del contenedor */
#card_payment_container iframe,
#wallet_container iframe {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 480px) {
  /* Forzar layout en una sola columna si alguna regla previa lo impide */
  .grid-hero, .hero-content { grid-template-columns: 1fr !important; gap: 16px !important; }
}
/* -------------------------------------------------------------- */
.bar{position:sticky;top:0;z-index:20;background:#0c1117aa;backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.mx-flag{width:18px;height:12px;background:linear-gradient(90deg,#117a37 0 33%,#fff 33% 66%,#b41027 66% 100%);border-radius:2px;border:1px solid #223}
.nav{display:flex;gap:12px;align-items:center}
.nav a{padding:8px 10px;border-radius:10px}
.nav .cta{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:800;border-radius:10px;padding:8px 10px}

.hero{position:relative;min-height:76vh;border-bottom:1px solid var(--line);overflow:hidden}
.hero {position:relative;min-height:76vh;border-bottom:1px solid var(--line);overflow:hidden; background:var(--paper);}
.hero .stadium{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05);}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(10,13,18,.92) 65%)}
.hero-content{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:28px 16px;display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:end}

.hourglass-panel{background:#0b1224b3;border:1px solid var(--line);backdrop-filter:blur(6px);border-radius:24px;padding:12px;display:flex;flex-direction:column;gap:8px;min-height:520px}
.hg-head{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;color:#b1bfd0;font-weight:800;font-size:11px;letter-spacing:.08em}
.hg-digits{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hg-digits .b{border:1px solid #1e3a8a;border-radius:12px;padding:8px;text-align:center;font-weight:900;font-size:22px;}
.hg-digits#digits-raffle .b:nth-child(1){background:#16a34a !important; color:#fff !important;}
.hg-digits#digits-raffle .b:nth-child(2){background:#fff !important; color:#222 !important;}
.hg-digits#digits-raffle .b:nth-child(3){background:#f3f3f3 !important; color:#222 !important;}
.hg-digits#digits-raffle .b:nth-child(4){background:#ef4444 !important; color:#fff !important;}
.hg-digits .b:nth-child(1){background:#16a34a !important; color:#fff !important;} /* verde para días */
.hg-digits .b:nth-child(2){background:#fff !important; color:#222 !important;} /* blanco para horas */
.hg-digits .b:nth-child(3){background:#f3f3f3 !important; color:#222 !important;} /* blanco diferente para minutos */
.hg-digits .b:nth-child(4){background:#ef4444 !important; color:#fff !important;} /* rojo para segundos */
.hg-head.small span{font-size:10px}
.hg-digits.small .b{font-size:20px;padding:8px}

/* Panel con el logo GDL26 grande y centrado */
.hg-body{
  position:relative;border:none;border-radius:18px;flex:1;display:flex;
  align-items:center;justify-content:center;overflow:hidden;
}
.hg-body img{ width:100%; height:100%; object-fit:contain; }

.copy h1{font-family:Montserrat,Inter,sans-serif;font-weight:900;font-size:clamp(26px,5vw,48px);margin:0}
.copy p{color:var(--muted);max-width:720px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 28px;justify-content:center}
.facts span{background:#0d141b;border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-weight:700}
.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer}
.btn.primary{background:#004AAD !important;color:#fff !important; text-align:center;}
.btn.primary{background:#004AAD !important;color:#fff !important; text-align:center;}
.copy .btn.primary{display:block;margin:36px auto 0}
.btn.primary:hover{background:#0B5FFF !important}
a.btn.primary, button.btn.primary{ background:#004AAD !important; color:#fff !important; text-align:center; }
a.btn.primary:visited{ color:#fff !important; }
.btn.primary:not(:disabled):hover{ background:#0B5FFF !important; }
.btn.ghost{background:transparent;border:1px solid var(--line);color:#e9eef5}
.btn.mp-mercadopago{background:#ffe600 !important;color:#111 !important;display:flex;align-items:center;gap:8px;justify-content:center;font-weight:800;border:1px solid #e5d200;box-shadow:0 2px 4px rgba(0,0,0,.25);}
.btn.mp-mercadopago:hover{background:#ffef33 !important}
.btn.mp-mercadopago svg{flex-shrink:0}
.btn.mp-mercadopago span{line-height:1}
.mercadopago-button{position:relative;overflow:hidden;--mp-yellow:#ffe600;background:var(--mp-yellow);border:0;color:#111;font-weight:700;font-family:Inter,system-ui;padding:16px 22px;border-radius:38px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;line-height:1;transition:background .25s, transform .15s, box-shadow .25s;box-shadow:0 4px 10px -2px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.25);-webkit-tap-highlight-color: transparent;}
.mercadopago-button:hover{background:#ffef33}
.mercadopago-button:active{
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.mercadopago-button:focus-visible{outline:2px solid #009ee3;outline-offset:2px}
.mercadopago-button:disabled{opacity:.6;cursor:not-allowed;transform:none}
.mercadopago-button .mp-logo{width:30px;height:30px;flex-shrink:0;position:relative;object-fit:contain;display:inline-block;border:none;background:none;padding:0;}
.mercadopago-button .mp-logo[src]{display:inline-block;width:30px;height:30px;object-fit:contain;border:none;background:none;padding:0;}
.mercadopago-button .mp-logo svg{display:block}
.mercadopago-button .mp-logo-img{height:26px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.mercadopago-button .mp-text{white-space:nowrap}
/* Ripple */
.mercadopago-button .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:mp-ripple .6s ease-out forwards;pointer-events:none}
@keyframes mp-ripple{to{transform:scale(3.2);opacity:0}}

.container{max-width:1180px;margin:0 auto;padding:18px 16px}
.tickets .head{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px}
.legend{display:flex;gap:12px;color:#b1bfd0;font-size:14px}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px}
.dot.green{background:#16a34a}.dot.amber{background:#f59e0b}.dot.red{background:#ef4444}.dot.blue{background:#60a5fa}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px}
.card h4{margin:0}.combo{font-size:12px;color:var(--muted)}.actions{display:flex;gap:8px}
.tiny{font-size:12px;color:var(--muted)}

/* SOLD en rojo y deshabilitado */
.card.sold{ background:#2a0a0a !important; border:1px solid #ff4d4d !important; opacity:.65; pointer-events:none }
.card.sold h4{ color:#ff4d4d !important; }
.card .actions .buy[disabled]{ opacity:.7; cursor:not-allowed; }

.card.locked{ background:#fffbe6 !important; border:1px solid #f59e0b !important; opacity:.85; pointer-events:none }
.card.locked h4{ color:#f59e0b !important; }

.how{margin:26px 0;border-top:1px solid var(--line);padding-top:18px}
.how ol{margin:8px 0 0 20px}

.dialog{border:0;border-radius:16px;background:#0e1320;color:#e9eef5;padding:0}
.form{display:flex;flex-direction:column;gap:12px;padding:16px;min-width:min(90vw,520px)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
input{background:#0b1118;border:1px solid var(--line);color:#e9eef5;padding:10px;border-radius:10px}

.wa{position:fixed;right:16px;bottom:16px;background:#25D366;color:#111627;padding:12px 14px;border-radius:999px;font-weight:900;box-shadow:0 8px 22px rgba(0,0,0,.35)}

.foot{border-top:1px solid var(--line);padding:22px 16px;text-align:center;color:#8ea2b2}

@media (max-width:980px){
  .hero-content{grid-template-columns:1fr;gap:18px}
  .hourglass-panel{min-height:460px}
  .copy{text-align:center}
  .grid{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr}
  .copy img[alt="Logo encabezado"] {
    width: 100% !important;
    max-width: 98vw !important;
    height: auto !important;
    max-height: 160px !important;
    margin-left: auto;
    margin-right: auto;
  }
  .copy .btn.primary {
    width: 100%;
    max-width: 98vw;
    font-size: 1.1em;
  }
  .logo-encabezado{max-width:90vw !important; height:auto !important;}
}
/* Mejoras móviles extra */
@media (max-width:600px){
  .dot{width:7px;height:7px;margin-right:4px;}
  .wa{padding:8px 10px;font-size:15px;right:10px;bottom:10px;}
  .grid{grid-template-columns:repeat(3,1fr);gap:7px;width:100%;margin:0 auto;}
  .card{padding:6px;gap:3px;}
  .card h4{font-size:14px;}
  .legend{font-size:11px;gap:6px;}
  .btn.primary, .copy .btn.primary{font-size:0.95em;padding:9px 10px;}

  /* Corregir franja negra en el hero y contenedores */
  .hero, .hero-content, .hourglass-panel {
    width:100% !important;
    margin:0 !important;
    box-sizing:border-box;
  }
  body {
    width:100%;
    overflow-x:hidden;
  }

  /* Fondo de selección ocupa todo el ancho */
  .hero {
    position:relative;
    min-height:76vh;
    width:100% !important;
    margin:0 !important;
    box-sizing:border-box;
    overflow:hidden;
  }
  .hero .stadium {
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    object-fit:cover;
    left:0;
    right:0;
    margin:0 auto;
  }
  .hero-content {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100% !important;
    margin:0 auto !important;
    padding:0 8px;
    box-sizing:border-box;
  }
  .hourglass-panel {
    margin:0 auto !important;
    width:100%;
    max-width:420px;
    box-sizing:border-box;
  }

  .dialog, .form {
    min-width:unset !important;
    width:100% !important;
    padding:6px !important;
  }
  .form input {
    font-size:15px !important;
    padding:7px !important;
    margin-bottom:5px;
    width:100% !important;
    box-sizing:border-box;
  }
}

/* Admin filters/counters */
#filters .btn.active{ background:#004AAD; color:#fff; }
.status-chips{ display:flex; gap:8px; flex-wrap:wrap }
.status-chips .chip{
  background:#0d141b;border:1px solid var(--line);color:#b1bfd0;
  padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700
}
.status-chips .chip.available{ border-color:#16a34a33 }
status-chips .chip.reserved{ border-color:#f59e0b33 }
.status-chips .chip.sold{ border-color:#ef444433 }
.status-chips .chip.locked{ border-color:#60a5fa33 }

/* Toasts */
.toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:500;max-width:92vw}
.toast{background:#0e1625;border:1px solid #1f2c3a;padding:10px 14px;border-radius:12px;font-weight:600;opacity:0;transform:translateY(6px);transition:.3s;box-shadow:0 6px 18px -4px rgba(0,0,0,.45);font-size:14px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.info{border-color:#2563eb33}
.toast.error{border-color:#dc262633;color:#fecaca;background:#3f1214}
.toast.success{border-color:#16a34a55;color:#d1fae5;background:#0f2e1d}

/* Spinner */
.spinner{width:26px;height:26px;border:4px solid #1d2a38;border-top-color:#0B5FFF;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Selected card highlight */
.card.selected{outline:3px solid #0B5FFF; box-shadow:0 0 0 4px #0B5FFF22}

/* Reserved visual (optional) */
.card.reserved{background:#332d11;border:1px solid #eab308 !important;}
.card.reserved h4{color:#facc15}

.mercadopago-button.mp-full{width:100%;justify-content:flex-start;gap:14px;padding:18px 26px;font-size:17px}
.mercadopago-button.mp-full .mp-logo{
  width:54px !important;
  height:34px !important;
  display:inline-block !important;
  object-fit:contain !important;
  border:none !important;
  background:none !important;
  padding:0 !important;
  vertical-align:middle !important;
}
.mercadopago-button.loading{opacity:1;}
.mercadopago-button.loading span{opacity:.75}

.logo-encabezado{display:block;margin:0 0 18px 0;width:100%;max-width:520px;height:auto;object-fit:contain}
@media (min-width:1400px){ .logo-encabezado{max-width:600px;} }

.hg-title{ text-align:center; font-weight:700; font-size:20px; margin:0 0 8px 0; }
.mt24{ margin:24px 0 8px 0; }

/* === Overrides: MP CTA solo texto (amarillo) y ocultar al abrir el Brick === */
.dialog .mercadopago-button,
.mercadopago-button{
  background:#FFE600 !important;
  color:#2D3277 !important;
  border:0 !important;
  gap:0 !important;
}

/* Ocultar cualquier logo/insignia dentro del botón */
.mercadopago-button .mp-logo,
.mercadopago-button .mp-logo-img,
.mercadopago-button img,
.mercadopago-button svg,
.mercadopago-button .badge,
.mercadopago-button [class*="logo"]{
  display:none !important;
  visibility:hidden !important;
}

/* Ocultar CTA cuando el Brick ya está visible (Safari/Chrome soportan :has) */
.dialog:has(#card_payment_container iframe) .mercadopago-button,
.dialog:has(#card_payment_container iframe) input[type="button"][value^="Pagar con Mercado Pago"],
.dialog:has(#card_payment_container iframe) input[type="submit"][value^="Pagar con Mercado Pago"],
.dialog:has(#wallet_container iframe) .mercadopago-button,
.dialog:has(#wallet_container iframe) input[type="button"][value^="Pagar con Mercado Pago"],
.dialog:has(#wallet_container iframe) input[type="submit"][value^="Pagar con Mercado Pago"]{
  display:none !important;
}

/* Y si el código la deshabilita o marca como loading, también esconderla */
.dialog .mercadopago-button.loading,
.dialog .mercadopago-button:disabled,
.dialog input[type="button"][value^="Pagar con Mercado Pago"]:disabled,
.dialog input[type="submit"][value^="Pagar con Mercado Pago"]:disabled{
  opacity:0 !important;
  visibility:hidden !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:none !important;
}

</file>
/* === PATCH 2025-08-21 — Quitar badge azul definitivamente y ocultar CTA al abrir Brick === */

/* 1) Forzar que solo quede el último hijo (texto) dentro del botón */
.mercadopago-button > *:not(:last-child) { 
  display: none !important; 
}

/* 1b) Quitar cualquier pseudo-element/imagen interna que pinte badge */
.mercadopago-button::before,
.mercadopago-button::after { 
  content: none !important; 
  display: none !important; 
}

/* 1c) Neutralizar posibles fondos azules/insignias internas */
.mercadopago-button * { 
  background: transparent !important; 
}

/* 2) Ocultar el CTA apenas exista un iframe del Brick en la página (sin depender de .dialog) */
body:has(#card_payment_container iframe) .mercadopago-button,
body:has(#wallet_container iframe) .mercadopago-button,
html:has(#card_payment_container iframe) .mercadopago-button,
html:has(#wallet_container iframe) .mercadopago-button,
body:has(#card_payment_container iframe) input[type="button"][value^="Pagar con Mercado Pago"],
body:has(#card_payment_container iframe) input[type="submit"][value^="Pagar con Mercado Pago"],
body:has(#wallet_container iframe) input[type="button"][value^="Pagar con Mercado Pago"],
body:has(#wallet_container iframe) input[type="submit"][value^="Pagar con Mercado Pago"]{
  display: none !important;
}

/* 2b) También ocultar si el botón entra en estado busy/disabled */
.mercadopago-button[aria-busy="true"],
.mercadopago-button[aria-disabled="true"],
.mercadopago-button:disabled{
  display: none !important;
}

/* === Remate fino: accesibilidad y tacto en móviles === */
@media (prefers-reduced-motion: reduce) {
  .mercadopago-button { transition: none !important; }
  .mercadopago-button .ripple { animation: none !important; }
}