/** * Flujo de selección de entradas — Miscelánea Tickets * Tema: minimalista blanco y negro. Los lienzos del mapa de asientos * conservan su estilo original. 100% responsive / mobile-first. */ /* Paleta también en :root: el toast, el chip de reserva y los modales se insertan en (fuera del contenedor) y necesitan estas variables. */ :root { --mt-accent: #fe3331; --mt-accent-dark: #dd201e; --mt-navy: #131a3d; --mt-ink: #141414; --mt-ink-soft: #5c5c5c; --mt-line: #e5e5e5; --mt-radius-sm: 12px; } .mt-ticket-flow-container { --mt-gold: #c5a028; --mt-gold-light: #e3c75e; --mt-gold-dark: #a9881d; --mt-ink: #141414; --mt-ink-soft: #5c5c5c; --mt-accent: #fe3331; /* rojo Pablo Méndez Performances */ --mt-accent-dark: #dd201e; --mt-navy: #131a3d; /* azul de la landing del circo */ --mt-cream: #f7f7f7; --mt-paper: #ffffff; --mt-line: #e5e5e5; --mt-wine: #2a1730; --mt-ok: #2f9e6f; --mt-busy: #c9c2b4; --mt-danger: #b3332b; --mt-radius: 16px; --mt-radius-sm: 12px; --mt-shadow: 0 8px 24px rgba(0, 0, 0, 0.07); --mt-shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.12); padding: clamp(16px, 4vw, 40px); background: #ffffff; border: 1px solid var(--mt-line); border-radius: calc(var(--mt-radius) + 8px); box-shadow: var(--mt-shadow); color: var(--mt-ink); font-family: inherit; box-sizing: border-box; overflow: hidden; } .mt-ticket-flow-container *, .mt-ticket-flow-container *::before, .mt-ticket-flow-container *::after { box-sizing: border-box; } /* ───────── Encabezado ───────── */ .mt-flow-header { text-align: center; margin-bottom: clamp(16px, 3vw, 26px); } .mt-flow-title { margin: 0 0 10px; font-size: clamp(1.45rem, 4.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.015em; color: var(--mt-ink); line-height: 1.12; text-wrap: balance; } .mt-flow-date { margin: 0 auto; font-size: clamp(0.82rem, 2.5vw, 0.95rem); color: var(--mt-ink-soft); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 8px 16px; background: var(--mt-paper); border: 1px solid var(--mt-line); border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .mt-flow-date-icon { color: var(--mt-accent); font-size: 0.55rem; } /* Aviso PMR bajo las zonas/mapa */ .mt-pmr-notice { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 14px auto 0; padding: 10px 16px; max-width: 640px; font-size: 0.86rem; color: var(--mt-ink); background: rgba(74, 144, 217, 0.08); border: 1px solid rgba(74, 144, 217, 0.35); border-radius: 10px; text-align: center; } .mt-pmr-notice svg { color: #2a6bb0; flex: 0 0 auto; } .mt-pmr-notice a { color: #2a6bb0; font-weight: 700; text-decoration: underline; } /* Descuento automático de la función */ .mt-flow-discount { display: inline-block; margin: 8px auto 0; padding: 4px 14px; font-size: 0.8rem; font-weight: 700; color: #1a7f4e; background: rgba(26, 127, 78, 0.09); border: 1px solid rgba(26, 127, 78, 0.28); border-radius: 999px; } /* Apertura de puertas, bajo la píldora de fecha */ .mt-flow-doors { margin: 8px auto 0; font-size: clamp(0.78rem, 2.3vw, 0.88rem); color: var(--mt-ink-soft); text-align: center; } .mt-flow-venue { padding-left: 10px; border-left: 1px solid var(--mt-line); font-weight: 600; } /* ───────── Stepper ───────── */ .mt-progress { list-style: none; display: flex; justify-content: center; gap: clamp(22px, 8vw, 80px); margin: 0 0 clamp(20px, 4vw, 34px); padding: 0; position: relative; } .mt-progress::before { content: ""; position: absolute; top: 18px; left: 20%; right: 20%; height: 2px; background: linear-gradient(90deg, var(--mt-line), var(--mt-line)); z-index: 0; } .mt-progress-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; } .mt-progress-dot { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--mt-paper); border: 2px solid var(--mt-line); color: var(--mt-ink-soft); font-weight: 700; font-size: 0.95rem; transition: all .25s ease; } .mt-progress-label { font-size: 0.8rem; color: var(--mt-ink-soft); font-weight: 600; letter-spacing: 0.01em; } .mt-progress-step.is-active .mt-progress-dot { background: var(--mt-accent); border-color: var(--mt-accent); color: #fff; box-shadow: 0 0 0 5px rgba(254, 51, 49, 0.16); transform: scale(1.06); } .mt-progress-step.is-active .mt-progress-label { color: var(--mt-ink); } .mt-progress-step.is-done .mt-progress-dot { background: var(--mt-navy); border-color: var(--mt-navy); color: #fff; } .mt-progress-step.is-done .mt-progress-dot::before { content: "✓"; position: absolute; } .mt-progress-step.is-done .mt-progress-dot { text-indent: -9999px; } .mt-progress-step.is-done .mt-progress-dot::before { text-indent: 0; } /* ───────── Pasos ───────── */ .mt-flow-step { display: none; animation: mt-fade .32s ease; } .mt-flow-step--active { display: block; } @keyframes mt-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .mt-step-header { text-align: center; margin-bottom: clamp(16px, 3vw, 24px); } .mt-step-title { margin: 0 0 5px; font-size: clamp(1.1rem, 3vw, 1.35rem); font-weight: 800; } .mt-step-description { margin: 0; color: var(--mt-ink-soft); font-size: clamp(0.85rem, 2.5vw, 0.95rem); } /* ───────── Tarjetas de sección ───────── */ .mt-zones-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 210px)); gap: clamp(10px, 2vw, 16px); margin-bottom: clamp(16px, 3vw, 26px); justify-content: center; } .mt-zone-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px 18px; background: var(--mt-paper); border: 2px solid var(--mt-line); border-radius: var(--mt-radius); cursor: pointer; text-align: center; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; font: inherit; color: inherit; overflow: hidden; width: 100%; } .mt-zone-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--mt-zone-color, var(--mt-ink)); opacity: .85; } .mt-zone-card:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--mt-zone-color, var(--mt-ink)); box-shadow: var(--mt-shadow-lift); } .mt-zone-card-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--mt-zone-color, var(--mt-ink)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mt-zone-color, var(--mt-ink)) 18%, transparent); margin: 2px 0 4px; } .mt-zone-card-name { font-weight: 700; font-size: 1.04rem; line-height: 1.2; } .mt-zone-card-price { font-weight: 800; font-size: clamp(1.1rem, 3vw, 1.3rem); color: var(--mt-ink); letter-spacing: -0.01em; } .mt-zone-card-price .woocommerce-Price-amount { color: inherit; } /* Función con descuento: precio real tachado + precio final destacado. */ .mt-zone-card-price--discounted { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; justify-content: inherit; } .mt-zone-card-price-old { font-size: 0.78em; font-weight: 600; color: var(--mt-ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; white-space: nowrap; } .mt-zone-card-price-now { color: var(--mt-accent-dark, var(--mt-ink)); white-space: nowrap; } .mt-zone-card-available { font-size: 0.76rem; color: var(--mt-ink-soft); padding: 3px 10px; background: var(--mt-cream); border-radius: 999px; } .mt-zone-card-check { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--mt-accent); color: #fff; font-size: 0.72rem; font-weight: 700; opacity: 0; transform: scale(.4) rotate(-90deg); transition: all .22s cubic-bezier(.34, 1.56, .64, 1); } .mt-zone-card.selected { border-color: var(--mt-zone-color, var(--mt-ink)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt-zone-color, var(--mt-ink)) 25%, transparent), var(--mt-shadow); } .mt-zone-card.selected .mt-zone-card-check { opacity: 1; transform: scale(1) rotate(0deg); } .mt-zone-card--soldout, .mt-zone-card:disabled { opacity: .55; cursor: not-allowed; filter: grayscale(.5); } .mt-zone-card--soldout .mt-zone-card-available { color: #fff; background: var(--mt-danger); font-weight: 700; } /* ───────── Footer de paso / cantidad ───────── */ .mt-step-footer{ display:flex; align-items:flex-end; gap:16px; margin-top:22px; padding:18px; background:#fff; border:1px solid var(--mt-line); border-radius:var(--mt-radius); box-shadow:0 6px 18px rgba(0,0,0,.05); } .mt-quantity-field{ display:flex; flex-direction:column; gap:8px; } .mt-quantity-label{ font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mt-ink-soft); } .mt-quantity-select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; width:95px; height:52px; padding:0 42px 0 16px; border:2px solid var(--mt-line); border-radius:var(--mt-radius-sm); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center, var(--mt-paper); color:var(--mt-ink); font:inherit; font-size:1rem; font-weight:700; cursor:pointer; transition:.2s; } .mt-quantity-select:hover{ border-color:var(--mt-ink); } .mt-quantity-select:focus{ outline:none; border-color:var(--mt-accent); box-shadow:0 0 0 4px rgba(254,51,49,.16); } .mt-quantity-select option{ background:#fff; color:var(--mt-ink); } /* ───────── Cantidad + Continuar = UN solo control (paso 1) ───────── Pill futurista: el selector y el botón forman un único elemento, perfectamente alineados y a la misma altura. */ .mt-step-footer:has(.mt-quantity-field){ width:fit-content; max-width:100%; margin:clamp(20px,4vw,32px) auto 0; align-items:stretch; gap:0; padding:6px; background:var(--mt-navy); border:1px solid var(--mt-navy); border-radius:999px; box-shadow:0 14px 32px rgba(19,26,61,.35); } /* Segmento de cantidad */ .mt-step-footer:has(.mt-quantity-field) .mt-quantity-field{ flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; height:54px; padding:0 16px 0 22px; margin-right:6px; border-right:1px solid rgba(255,255,255,.12); } .mt-step-footer:has(.mt-quantity-field) .mt-quantity-label{ font-size:.56rem; letter-spacing:.14em; color:rgba(255,255,255,.5); line-height:1; } .mt-step-footer:has(.mt-quantity-field) .mt-quantity-select{ width:auto; min-width:54px; height:auto; padding:0 30px 0 0; border:none; border-radius:0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 4px center, transparent; color:#fff; font-size:1.5rem; font-weight:800; line-height:1.15; } .mt-step-footer:has(.mt-quantity-field) .mt-quantity-select:hover, .mt-step-footer:has(.mt-quantity-field) .mt-quantity-select:focus{ border:none; box-shadow:none; } .mt-step-footer:has(.mt-quantity-field) .mt-quantity-select option{ background:var(--mt-navy); color:#fff; } /* Botón Continuar dentro del pill */ .mt-step-footer:has(.mt-quantity-field) .mt-continue-btn{ flex:0 0 auto; min-height:0; height:54px; padding:0 30px; border:none; border-radius:999px; display:inline-flex; align-items:center; gap:10px; font-size:1rem; background:var(--mt-accent); color:#fff; box-shadow:0 6px 16px rgba(254,51,49,.45); } .mt-step-footer:has(.mt-quantity-field) .mt-continue-btn::after{ content:"→"; font-size:1.15rem; line-height:1; transition:transform .2s ease; } .mt-step-footer:has(.mt-quantity-field) .mt-continue-btn:hover:not(:disabled){ background:var(--mt-accent-dark); } .mt-step-footer:has(.mt-quantity-field) .mt-continue-btn:hover:not(:disabled)::after{ transform:translateX(4px); } /* ───────── Botones ───────── */ .mt-btn { flex: 1 1 auto; min-height: 52px; padding: 13px 28px; font: inherit; font-weight: 700; font-size: 1rem; border-radius: var(--mt-radius-sm); border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease; -webkit-tap-highlight-color: transparent; } .mt-btn:active { transform: translateY(1px) scale(.995); } .mt-btn:focus-visible { outline: 3px solid rgba(254, 51, 49, 0.45); outline-offset: 2px; } .mt-btn--primary { background: var(--mt-accent); color: #fff; box-shadow: 0 6px 16px rgba(254, 51, 49, 0.35); } .mt-btn--primary:hover:not(:disabled) { background: var(--mt-accent-dark); box-shadow: 0 8px 20px rgba(254, 51, 49, 0.45); } .mt-btn--primary:disabled { background: var(--mt-busy); box-shadow: none; cursor: not-allowed; text-shadow: none; } .mt-btn--ghost { flex: 0 0 auto; background: transparent; color: var(--mt-ink-soft); border-color: var(--mt-line); } .mt-btn--ghost:hover { border-color: var(--mt-ink-soft); color: var(--mt-ink); background: rgba(255,255,255,.6); } /* ───────── Opciones auto/manual ───────── */ .mt-seat-selection-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin-bottom: clamp(16px, 3vw, 24px); } .mt-option { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 2px solid var(--mt-line); border-radius: var(--mt-radius); background: var(--mt-paper); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .mt-option:hover { border-color: var(--mt-accent); } .mt-option input { margin-top: 3px; accent-color: var(--mt-accent); width: 18px; height: 18px; flex: 0 0 auto; } .mt-option:has(input:checked) { border-color: var(--mt-accent); background: rgba(254, 51, 49, 0.03); box-shadow: 0 0 0 3px rgba(254, 51, 49, 0.14); } .mt-option-body { display: flex; flex-direction: column; gap: 3px; } .mt-option-label { font-weight: 700; } .mt-option-desc { font-size: 0.82rem; color: var(--mt-ink-soft); line-height: 1.4; } /* ───────── Mejor disponible ───────── */ .mt-auto-info { margin-bottom: 18px; } .mt-auto-info-title { font-weight: 700; margin: 0 0 12px; } .mt-auto-seats-list { display: flex; flex-wrap: wrap; gap: 12px; } .mt-auto-seat-item { flex: 1 1 130px; max-width: 200px; padding: 16px 14px; background: var(--mt-paper); border: 2px solid var(--mt-line); border-top: 4px solid var(--mt-ink); border-radius: var(--mt-radius-sm); text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .mt-auto-seat-label { font-weight: 800; font-size: 1.15rem; color: var(--mt-ink); margin-bottom: 4px; } .mt-auto-seat-zone { font-size: 0.8rem; color: var(--mt-ink-soft); margin-bottom: 6px; } .mt-auto-seat-price { font-weight: 700; color: var(--mt-ink); font-size: 0.95rem; } /* ───────── Leyenda ───────── */ .mt-seat-legend { display: flex; justify-content: center; gap: clamp(12px, 3vw, 22px); flex-wrap: wrap; margin-bottom: 14px; font-size: 0.8rem; color: var(--mt-ink); font-weight: 600; } .mt-legend-item { display: inline-flex; align-items: center; gap: 6px; } .mt-legend-chip { width: 15px; height: 15px; border-radius: 50%; display: inline-block; box-sizing: border-box; flex: 0 0 auto; } /* Libre: color real de la zona elegida (lo fija el JS con --mt-zone-color) con el anillo blanco que llevan las butacas disponibles en el mapa. */ .mt-legend-chip--available { background: var(--mt-zone-color, #9aa0a6); border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.28); } /* Tuyo: dorado de butaca seleccionada, igual que en el mapa. */ .mt-legend-chip--selected { background: var(--mt-gold-light, #e3c75e); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--mt-gold-dark, #a9881d); } /* Ocupado: el mismo gris apagado de las butacas no disponibles. */ .mt-legend-chip--unavailable { background: #4b4553; opacity: 0.85; } /* Movilidad reducida: color de zona con el anillo azul del mapa. */ .mt-legend-chip--accessible { background: var(--mt-zone-color, #9aa0a6); border: 2px solid #5db2ff; } /* Visibilidad reducida: color de zona con el borde discontinuo del mapa. */ .mt-legend-chip--lowvis { background: var(--mt-zone-color, #9aa0a6); border: 2px dashed rgba(0, 0, 0, 0.55); } /* Etiquetas de tipo de butaca en el resumen */ .mt-seat-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; } .mt-seat-tag--acc { background: #e6eef7; color: #2563a8; } .mt-seat-tag--low { background: #fbeede; color: #9a5b12; } /* ───────── Nota explicativa del recinto circular ───────── */ .mt-venue-note { background: #f5f5f5; border-left: 3px solid var(--mt-navy); border-radius: 8px; padding: 12px 16px; font-size: 0.9rem; line-height: 1.55; color: var(--mt-ink-soft); margin-bottom: 16px; } .mt-venue-note strong { color: var(--mt-ink, #1a1a1a); } /* ───────── Layout: cuadrícula arriba + visor debajo (ambos 100%) ───────── */ .mt-manual-layout { display: flex; flex-direction: column; gap: 20px; margin-bottom: 18px; } /* ───────── Cuadrícula del recinto (igual que el constructor) ───────── */ .mt-zone-map-container { overflow: auto; width: 100%; } .mt-grid-map { display: grid; gap: 4px; justify-content: center; min-width: max-content; margin: 0 auto; padding: 20px; background: #1c1c1c; border-radius: 14px; } .mt-gcell { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; border-radius: 5px; box-sizing: border-box; padding: 0; border: none; } .mt-gcorner { background: transparent; } .mt-ghead, .mt-grow { color: #8a8a82; font-weight: 700; background: transparent; } .mt-gempty { background: transparent; box-shadow: inset 0 0 0 1px #333; } .mt-gaisle { background: repeating-linear-gradient(45deg, #3a3a3a, #3a3a3a 4px, #444 4px, #444 8px); } .mt-gseat { background: var(--seat-color, #C5A028); cursor: pointer; color: #fff; position: relative; transition: transform .08s ease, filter .12s ease; } .mt-gseat.is-ghost { opacity: .22; pointer-events: none; } .mt-gseat.is-available:hover { transform: scale(1.18); filter: brightness(1.15); z-index: 2; } .mt-gseat.is-unavailable { background: #555 !important; opacity: .5; cursor: not-allowed; } .mt-gseat.is-blocked { background: repeating-linear-gradient(45deg, #4a4a4a, #4a4a4a 3px, #5e5e5e 3px, #5e5e5e 6px) !important; cursor: not-allowed; opacity: .8; box-shadow: inset 0 0 0 1px #6a6a6a; } .mt-gseat.is-selected { background: var(--mt-gold) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mt-gold); z-index: 3; } .mt-gseat.is-accessible { box-shadow: inset 0 0 0 2px #fff; } .mt-gseat.is-accessible::after { content: ''; position: absolute; inset: 0; background: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Cpath d='M11 6v6h5l3 6'/%3E%3Cpath d='M11 12a6 6 0 1 0 5 9'/%3E%3C/svg%3E"); } .mt-gseat.is-lowvis { box-shadow: inset 0 0 0 2px #e0a35e; } .mt-gseat.is-lowvis.is-accessible { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #e0a35e; } /* ───────── Selector de sectores (nivel 1) ───────── */ .mt-sector-picker { background: #1c1c1c; border-radius: 14px; padding: 20px; text-align: center; } .mt-sector-stage { display: inline-block; color: #14110c; background: var(--mt-gold, #C5A028); font-size: 0.72rem; font-weight: 800; letter-spacing: .2em; padding: 6px 30px; border-radius: 20px; margin-bottom: 18px; } .mt-sector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; max-width: 520px; margin: 0 auto; } .mt-sector-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; border: 2px solid rgba(255,255,255,.14); border-radius: 12px; background: #262626; color: #fff; cursor: pointer; transition: border-color .15s, background .15s, transform .08s; } .mt-sector-btn:hover:not(:disabled) { border-color: var(--mt-gold, #C5A028); background: #2e2e2e; transform: translateY(-2px); } .mt-sector-btn.is-soldout { opacity: .45; cursor: not-allowed; } .mt-sector-letter { font-size: 1.6rem; font-weight: 900; color: var(--mt-gold, #C5A028); line-height: 1; } .mt-sector-avail { font-size: 0.78rem; color: #b9b3a6; } .mt-sector-hint { color: #9a9486; font-size: 0.82rem; margin: 16px 0 0; } .mt-sector-back { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #cdbf9c; font-size: 0.82rem; font-weight: 700; padding: 7px 14px; border-radius: 8px; cursor: pointer; margin-bottom: 14px; } .mt-sector-back:hover { border-color: var(--mt-gold, #C5A028); color: #fff; } /* ───────── Cuadrícula por zona (sector · fila · butaca) ───────── */ .mt-zonegrid { background: #1c1c1c; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 18px; } .mt-zg-sector { } .mt-zg-sector-title { color: var(--mt-gold, #C5A028); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.12); } .mt-zg-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; } .mt-zg-rowlabel { width: 22px; flex-shrink: 0; color: #8a8a82; font-size: 0.72rem; font-weight: 700; text-align: center; } .mt-zg-seat { min-width: 26px; height: 26px; padding: 0 4px; border: none; border-radius: 5px; background: var(--seat-color, #C5A028); color: #fff; font-size: 0.68rem; font-weight: 700; cursor: pointer; transition: transform .08s ease, filter .12s ease; box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); } .mt-zg-seat.is-available:hover { transform: scale(1.15); filter: brightness(1.15); z-index: 2; } .mt-zg-seat.is-unavailable { background: #555 !important; opacity: .45; cursor: not-allowed; box-shadow: none; } /* PMR retenida: se distingue de una vendida — azul suave con el aro blanco PMR */ .mt-zg-seat.is-pmr-locked { background: #7da7d9 !important; opacity: .7; box-shadow: inset 0 0 0 2px #fff; } .mt-zg-seat.is-selected { background: var(--mt-gold, #C5A028) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mt-gold, #C5A028); } .mt-zg-seat.is-accessible { box-shadow: inset 0 0 0 2px #fff; } .mt-zg-seat.is-lowvis { box-shadow: inset 0 0 0 2px #e0a35e; } .mt-zg-empty { color: #9a9486; text-align: center; padding: 20px; margin: 0; } /* ───────── Visor circular 3D (debajo, 100% del ancho) ───────── */ .mt-venue-viewer { background: #14110c; border-radius: 14px; padding: 18px; width: 100%; } .mt-venue-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .mt-venue-viewer-title { color: var(--mt-gold); font-size: 0.82rem; text-transform: uppercase; letter-spacing: .12em; margin: 0; text-align: left; } .mt-venue-viewer-modes { display: inline-flex; background: rgba(255,255,255,.07); border-radius: 999px; padding: 3px; } .mt-viewmode-btn { border: none; background: transparent; color: #cdbf9c; font-size: 0.74rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; } .mt-viewmode-btn.is-active { background: var(--mt-gold); color: #14110c; } .mt-venue-viewer-stage { width: 100%; display: flex; align-items: center; justify-content: center; } .mt-venue-viewer-hint { color: #9a9486; font-size: 0.8rem; text-align: center; margin: 10px 0 0; } .mt-venue-viewer.has-selection .mt-venue-viewer-hint { display: none; } /* Plano real (imagen del recinto) */ .mt-realmap { position: relative; width: 100%; max-width: 560px; margin: 0 auto; } .mt-realmap-img { display: block; width: 100%; height: auto; border-radius: 10px; } .mt-realmap-ovl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .mt-realmap-sector { fill: rgba(197,160,40,.32); stroke: #C5A028; stroke-width: 0.6; animation: mt-sector-pulse 1.6s ease-in-out infinite; } @keyframes mt-sector-pulse { 0%,100% { fill-opacity: 1; } 50% { fill-opacity: .45; } } .mt-venue-3d { width: 100%; height: auto; display: block; max-height: 460px; } .mt-3d-tier { stroke-width: 0.5; stroke: rgba(0,0,0,.35); } .mt-3d-tier-line { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 0.5; } .mt-3d-stage { fill: var(--mt-gold); } .mt-3d-stage-label { fill: #14110c; font-size: 4.2px; font-weight: 800; letter-spacing: .02em; } .mt-3d-tier-sel { fill: none; stroke: var(--mt-accent, #fe3331); stroke-width: 2.2; opacity: .95; } .mt-3d-marker { fill: #fff; stroke: #1a1a1a; stroke-width: 1; } .mt-3d-marker-halo { fill: var(--mt-accent, #fe3331); opacity: .45; } .mt-3d-marker-stem { stroke: var(--mt-accent, #fe3331); stroke-width: 1.6; } .mt-3d-marker-label { fill: #fff; font-size: 9px; font-weight: 800; paint-order: stroke; stroke: #14110c; stroke-width: 3; } .mt-3d-zone-label { fill: var(--mt-gold); font-size: 7.5px; font-weight: 700; paint-order: stroke; stroke: #14110c; stroke-width: 2.5; } .mt-3d-rowlabel { fill: rgba(255,255,255,.5); font-size: 6px; font-weight: 700; } /* ───────── Aviso de asientos separados ───────── */ .mt-separated-warning { display: flex; align-items: center; gap: 10px; background: #f5f5f5; border: 1px solid #d9d9d9; color: #444444; border-radius: 10px; padding: 10px 14px; font-size: 0.88rem; margin: 12px 0; } .mt-separated-warning-icon { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: #141414; color: #fff; border-radius: 50%; font-weight: 800; font-size: 0.9rem; } /* ───────── Modal de confirmación ───────── */ .mt-confirm-modal { position: fixed; inset: 0; background: rgba(20,12,16,.62); display: flex; align-items: center; justify-content: center; z-index: 100000; padding: 20px; } .mt-confirm-modal-box { background: #fff; border-radius: 16px; max-width: 420px; width: 100%; padding: 28px 26px; box-shadow: 0 24px 60px rgba(0,0,0,.35); text-align: center; animation: mtModalIn .2s ease; } @keyframes mtModalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .mt-confirm-modal-title { margin: 0 0 10px; font-size: 1.25rem; color: var(--mt-ink, #1a1a1a); } .mt-confirm-modal-text { margin: 0 0 22px; color: var(--mt-ink-soft, #555); line-height: 1.55; font-size: 0.95rem; } .mt-confirm-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .mt-confirm-modal-actions .mt-btn { flex: 1 1 auto; min-width: 140px; } /* ───────── Mapa circular del recinto (SVG) ───────── */ .mt-zone-map-container { margin-bottom: 18px; } .mt-circular-map { display: block; width: 100%; max-width: 580px; margin: 0 auto; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 50%, rgba(42, 23, 48, 0.05), transparent 38%), radial-gradient(circle at 50% 50%, transparent 60%, rgba(197, 160, 40, 0.05)), var(--mt-paper); border-radius: var(--mt-radius); border: 1px solid var(--mt-line); box-shadow: inset 0 2px 10px rgba(28, 21, 48, 0.04); padding: 10px; touch-action: manipulation; } .mt-svg-stage { fill: var(--mt-wine, #2a1730); stroke: var(--mt-gold, #c5a028); stroke-width: 0.5; } .mt-svg-stage-label { fill: #f3e8c8; font-size: 2.7px; font-weight: 700; letter-spacing: 0.16em; pointer-events: none; user-select: none; } .mt-svg-seat { transition: opacity .12s ease, r .12s ease; } .mt-svg-seat--ghost { opacity: 0.16; pointer-events: none; } .mt-svg-seat--available { cursor: pointer; stroke: rgba(0, 0, 0, 0.28); stroke-width: 0.14; } .mt-svg-seat--available:hover { opacity: 0.6; } .mt-svg-seat--selected { fill: var(--mt-gold, #c5a028); stroke: #fff; stroke-width: 0.45; cursor: pointer; filter: drop-shadow(0 0 0.8px rgba(169, 136, 29, 0.9)); } .mt-svg-seat--unavailable { fill: var(--mt-busy, #b9b3ad); opacity: 0.5; cursor: not-allowed; } /* ───────── Seleccionados (badges) ───────── */ .mt-selected-seats { margin-bottom: 14px; } .mt-selected-seats-label { font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; } .mt-selected-seats-list { display: flex; flex-wrap: wrap; gap: 8px; } .mt-seat-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; background: var(--mt-navy); color: #fff; border-radius: 999px; font-size: 0.85rem; font-weight: 600; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); } .mt-seat-badge-remove { cursor: pointer; opacity: .65; font-size: 0.75rem; line-height: 1; padding: 3px; transition: opacity .15s ease; } .mt-seat-badge-remove:hover { opacity: 1; } /* ───────── Resumen (recibo) ───────── */ .mt-order-summary { background: var(--mt-paper); border: 1px solid var(--mt-line); border-radius: var(--mt-radius); padding: clamp(16px, 3vw, 26px); margin-bottom: clamp(16px, 3vw, 24px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .mt-order-summary::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--mt-navy); } .mt-summary-zone-label, .mt-summary-seats-label { font-size: 0.75rem; color: var(--mt-ink-soft); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; } .mt-summary-zone-value { font-size: 1.25rem; font-weight: 800; margin: 4px 0 18px; } .mt-summary-seats-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 18px; } .mt-summary-seat-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; background: var(--mt-cream); border: 1px solid var(--mt-line); border-radius: var(--mt-radius-sm); } .mt-summary-seat-number { font-weight: 800; color: var(--mt-ink); font-size: 1.02rem; } .mt-summary-seat-zone { color: var(--mt-ink-soft); font-size: 0.86rem; } .mt-summary-seat-price { font-weight: 700; white-space: nowrap; } .mt-summary-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 2px dashed var(--mt-line); } .mt-summary-total-label { font-weight: 600; color: var(--mt-ink-soft); } .mt-summary-total-amount { font-size: clamp(1.35rem, 4vw, 1.7rem); font-weight: 800; color: var(--mt-ink); letter-spacing: -0.01em; } /* ───────── Toast ───────── */ .mt-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 24px)); transform: translateX(-50%) translateY(20px); background: var(--mt-navy); color: #fff; padding: 14px 22px; border-radius: var(--mt-radius-sm, 12px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); font-weight: 600; font-size: 0.92rem; z-index: 99999; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; max-width: min(420px, calc(100vw - 32px)); text-align: center; } .mt-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .mt-toast::before { content: "⚠ "; color: #ff8a89; } /* ───────── Responsive ───────── */ @media (max-width: 760px) { .mt-zones-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); } .mt-circular-map { max-width: 100%; } } @media (max-width: 560px) { .mt-ticket-flow-container { margin: 0; border-radius: 0; border-left: none; border-right: none; padding: 16px 12px max(24px, env(safe-area-inset-bottom)); } .mt-zones-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .mt-zone-card { padding: 18px 10px 14px; } .mt-seat-selection-options { grid-template-columns: 1fr; } .mt-step-footer { flex-direction: column-reverse; align-items: stretch; gap: 10px; } .mt-btn, .mt-btn--ghost { width: 100%; flex: 1 1 auto; } .mt-quantity-field { width: 100%; } .mt-quantity-select { width: 100%; } /* El pill cantidad+continuar se mantiene como una sola fila también en móvil */ .mt-step-footer:has(.mt-quantity-field) { flex-direction: row; align-items: stretch; width: 100%; gap: 0; } .mt-step-footer:has(.mt-quantity-field) .mt-quantity-field { width: auto; flex: 0 0 auto; } .mt-step-footer:has(.mt-quantity-field) .mt-quantity-select { width: auto; } .mt-step-footer:has(.mt-quantity-field) .mt-continue-btn { flex: 1 1 auto; width: auto; } .mt-progress { gap: 18px; } .mt-progress::before { left: 12%; right: 12%; } .mt-progress-dot { width: 32px; height: 32px; font-size: 0.85rem; } .mt-progress-label { font-size: 0.7rem; } .mt-auto-seat-item { flex: 1 1 calc(50% - 12px); max-width: none; } .mt-summary-seat-item { grid-template-columns: auto 1fr; } .mt-summary-seat-price { grid-column: 1 / -1; justify-self: end; } } @media (max-width: 380px) { .mt-zones-grid { grid-template-columns: 1fr; } .mt-flow-date { font-size: 0.78rem; padding: 7px 12px; } .mt-auto-seat-item { flex: 1 1 100%; } } /* Accesibilidad: respetar reducción de movimiento */ @media (prefers-reduced-motion: reduce) { .mt-ticket-flow-container *, .mt-flow-step, .mt-toast { animation: none !important; transition: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ Mapa de sectores sobre el plano madre (nivel 1) ══════════════════════════════════════════════════════════════════════════ */ .mt-sector-picker--map { padding: 18px; } .mt-sectormap { display: block; width: 100%; max-width: 620px; margin: 0 auto; border-radius: 12px; background: #232323; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); } .mt-sectormap-dim { fill: rgba(20, 20, 20, .18); pointer-events: none; } .mt-sectormap-stage { fill: #3a3a40; stroke: #55555c; stroke-width: .4; } .mt-sectormap-stagetxt { fill: #b9b9c0; font-size: 2.3px; letter-spacing: .15px; } .mt-sector-hit { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .55); stroke-width: .35; cursor: pointer; transition: fill .15s ease, stroke .15s ease; outline: none; } .mt-sector-hit:hover, .mt-sector-hit:focus-visible { fill: rgba(197, 160, 40, .30); stroke: var(--mt-gold, #C5A028); stroke-width: .6; } .mt-sector-hit.is-soldout { cursor: not-allowed; fill: rgba(0, 0, 0, .45); stroke-dasharray: 1.2 1; } .mt-sector-tag-letter { fill: #fff; font-size: 5.2px; font-weight: 900; paint-order: stroke; stroke: rgba(0, 0, 0, .65); stroke-width: 1px; } .mt-sector-tag-avail { fill: #ffe9a8; font-size: 2.6px; font-weight: 700; paint-order: stroke; stroke: rgba(0, 0, 0, .65); stroke-width: .7px; } /* Chips accesibles bajo el mapa */ .mt-sector-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; } .mt-sector-btn--chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #262626; border: 1px solid #3d3d3d; cursor: pointer; transition: border-color .15s, transform .15s; } .mt-sector-btn--chip:hover:not(:disabled) { border-color: var(--mt-gold, #C5A028); transform: translateY(-1px); } .mt-sector-btn--chip .mt-sector-letter { font-size: 1.05rem; } .mt-sector-btn--chip .mt-sector-avail { font-size: .72rem; } /* ══════════════════════════════════════════════════════════════════════════ Butacas sobre el plano (nivel 2, zoom al sector) ══════════════════════════════════════════════════════════════════════════ */ .mt-zonegrid--map { padding: 14px; } .mt-seatmap-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .mt-seatmap-head .mt-sector-back { margin: 0; } .mt-seatmap-head .mt-zg-sector-title { margin: 0; } .mt-seatmap-frame { background: #1d1d1f; border-radius: 12px; padding: 8px; box-shadow: inset 0 0 0 1px #333; } .mt-seatmap-svg { display: block; width: 100%; height: auto; max-height: 560px; } .mt-seatmap-veil { fill: rgba(29, 29, 31, .55); pointer-events: none; } .mt-seatdot { transition: opacity .12s ease; } .mt-seatdot.is-context { opacity: .22; } .mt-seatdot.is-blocked { fill: #4a4a4a; opacity: .5; } .mt-seatdot.is-unavailable { fill: #565656 !important; opacity: .8; } .mt-seatdot.is-available { stroke: rgba(255, 255, 255, .85); stroke-width: .14; } .mt-seatdot.is-selected { fill: var(--mt-gold, #C5A028) !important; stroke: #fff; stroke-width: .28; filter: drop-shadow(0 0 1px rgba(197, 160, 40, .9)); } .mt-seatdot.is-accessible { stroke: #4da6ff; stroke-width: .3; } .mt-seatdot.is-lowvis { stroke-dasharray: .5 .35; } .mt-seatdot-g.is-clickable { cursor: pointer; outline: none; } .mt-seatdot-g.is-clickable:hover .mt-seatdot:not(.is-selected), .mt-seatdot-g.is-clickable:focus-visible .mt-seatdot:not(.is-selected) { stroke: var(--mt-gold, #C5A028); stroke-width: .34; } .mt-seatdot-num { fill: #101010; font-weight: 700; pointer-events: none; user-select: none; } .mt-seatdot.is-selected + .mt-seatdot-num, .mt-seatdot-g .mt-seatdot.is-selected ~ .mt-seatdot-num { fill: #fff; } /* ══════════════════════════════════════════════════════════════════════════ Plano real: butacas elegidas marcadas + mapa en el resumen (paso 3) ══════════════════════════════════════════════════════════════════════════ */ .mt-realmap-dot { fill: var(--mt-gold, #C5A028); stroke: #fff; stroke-width: .3; } .mt-realmap-dot-halo { fill: none; stroke: var(--mt-gold, #C5A028); stroke-width: .35; animation: mt-dot-pulse 1.6s ease-in-out infinite; } @keyframes mt-dot-pulse { 0%, 100% { opacity: .95; transform: none; } 50% { opacity: .3; } } .mt-summary-map { padding: 18px 18px 6px; } .mt-summary-map .mt-realmap { max-width: 420px; } .mt-summary-map-caption { text-align: center; color: #9a9486; font-size: .8rem; margin: 8px 0 0; } @media (max-width: 640px) { .mt-sector-picker--map { padding: 10px; } .mt-sectormap { max-width: 100%; } .mt-sector-tag-avail { display: none; } .mt-seatmap-svg { max-height: 70vh; } .mt-summary-map { padding: 12px 12px 0; } } @media (prefers-reduced-motion: reduce) { .mt-realmap-dot-halo, .mt-realmap-sector { animation: none !important; } } /* Canvas artificial del sector (nivel 2 sin plano de fondo) */ .mt-seatmap-pista { fill: var(--mt-gold, #C5A028); font-weight: 800; letter-spacing: .08em; opacity: .9; pointer-events: none; } .mt-seatmap-rowlab { fill: #8f8a7d; font-weight: 700; pointer-events: none; user-select: none; } /* Conmutador de vista de butacas: por sectores / todo el recinto */ .mt-seatview-toggle { display: flex; justify-content: center; gap: 0; margin: 4px 0 12px; } .mt-viewsel-btn { padding: 8px 18px; border: 1px solid #3d3d3d; background: #262626; color: #b9b3a6; font-weight: 700; font-size: .85rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .mt-viewsel-btn:first-child { border-radius: 999px 0 0 999px; } .mt-viewsel-btn:last-child { border-radius: 0 999px 999px 0; border-left: none; } .mt-viewsel-btn:hover { border-color: var(--mt-gold, #C5A028); color: #fff; } .mt-viewsel-btn.is-active { background: var(--mt-gold, #C5A028); border-color: var(--mt-gold, #C5A028); color: #101010; } /* Vista completa del recinto */ .mt-seatmap-seclab { fill: #fff; font-size: 4.6px; font-weight: 900; paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: .9px; pointer-events: none; opacity: .85; } .mt-seatmap-headnote { color: #9a9486; font-size: .78rem; margin-left: auto; } .mt-zonegrid--all .mt-zg-sector { margin-bottom: 18px; } @media (max-width: 640px) { .mt-viewsel-btn { padding: 7px 12px; font-size: .78rem; } .mt-seatmap-headnote { display: none; } } /* ══════════════════════════════════════════════════════════════════════════ PULIDO VISUAL — mapas basados en el constructor de cuadrícula Unifica los lienzos de mapa (escenario oscuro premium) con el tema oro/vino ══════════════════════════════════════════════════════════════════════════ */ /* ── Lienzo del selector de sectores ── */ .mt-sector-picker--map { padding: clamp(12px, 2.5vw, 22px); background: transparent; } .mt-sectormap { max-width: 640px; border-radius: var(--mt-radius, 16px); background: radial-gradient(120% 90% at 50% 0%, rgba(197, 160, 40, 0.10), transparent 55%), linear-gradient(180deg, #251b2e 0%, #1a1322 100%); box-shadow: inset 0 0 0 1px rgba(197, 160, 40, 0.25), 0 18px 44px rgba(28, 21, 48, 0.35); } .mt-sectormap-dim { fill: rgba(20, 14, 26, 0.22); } .mt-sectormap-stage { fill: #35283f; stroke: rgba(227, 199, 94, 0.55); stroke-width: 0.35; } .mt-sectormap-stagetxt { fill: var(--mt-gold-light, #e3c75e); font-size: 2.3px; font-weight: 700; letter-spacing: 0.15px; } /* Cuñas / bloques de sector */ .mt-sector-hit { fill: rgba(255, 255, 255, 0.045); stroke: rgba(227, 199, 94, 0.42); stroke-width: 0.32; cursor: pointer; outline: none; transition: fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease; } .mt-sector-hit:hover, .mt-sector-hit:focus-visible { fill: rgba(197, 160, 40, 0.26); stroke: var(--mt-gold-light, #e3c75e); stroke-width: 0.6; filter: drop-shadow(0 0 2px rgba(227, 199, 94, 0.55)); } .mt-sector-hit.is-soldout { cursor: not-allowed; fill: rgba(10, 7, 14, 0.55); stroke: rgba(255, 255, 255, 0.18); stroke-dasharray: 1.1 0.9; filter: none; } .mt-sector-tag-letter { fill: #fff; font-size: 5.4px; font-weight: 900; letter-spacing: 0.2px; paint-order: stroke; stroke: rgba(15, 10, 20, 0.75); stroke-width: 1.1px; } .mt-sector-tag-avail { fill: var(--mt-gold-light, #e3c75e); font-size: 2.5px; font-weight: 700; paint-order: stroke; stroke: rgba(15, 10, 20, 0.75); stroke-width: 0.65px; } /* ── Lienzo de butacas (canvas del sector / todo el recinto) ── */ .mt-zonegrid--map { padding: clamp(10px, 2vw, 18px); background: transparent; } .mt-seatmap-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; } .mt-seatmap-frame { background: radial-gradient(110% 80% at 50% 0%, rgba(197, 160, 40, 0.08), transparent 55%), linear-gradient(180deg, #241a2d 0%, #191221 100%); border-radius: var(--mt-radius, 16px); padding: clamp(8px, 1.6vw, 14px); box-shadow: inset 0 0 0 1px rgba(197, 160, 40, 0.22), 0 16px 40px rgba(28, 21, 48, 0.30); } .mt-seatmap-svg { max-height: 600px; } /* Butacas: microinteracciones */ .mt-seatdot { transition: opacity 0.12s ease, filter 0.15s ease; transform-box: fill-box; transform-origin: center; } .mt-seatdot.is-context { opacity: 0.16; } .mt-seatdot.is-blocked { fill: #3d3644; opacity: 0.5; } .mt-seatdot.is-unavailable { fill: #4b4553 !important; opacity: 0.85; stroke: none; } .mt-seatdot.is-available { stroke: rgba(255, 255, 255, 0.9); stroke-width: 0.13; filter: drop-shadow(0 0.18px 0.3px rgba(0, 0, 0, 0.45)); } .mt-seatdot.is-selected { fill: var(--mt-gold-light, #e3c75e) !important; stroke: #fff; stroke-width: 0.26; filter: drop-shadow(0 0 1.4px rgba(227, 199, 94, 0.95)); animation: mt-seat-pop 0.28s ease; } @keyframes mt-seat-pop { 0% { transform: scale(0.6); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } } .mt-seatdot.is-accessible { stroke: #5db2ff; stroke-width: 0.28; } .mt-seatdot.is-lowvis { stroke-dasharray: 0.5 0.35; } /* Plaza de movilidad reducida: ocupa un bloque 2×2, así que se dibuja con el doble de tamaño. Borde más marcado para que se lea como plaza especial. */ .mt-seatdot-g.is-pmr-big .mt-seatdot { stroke: #5db2ff; stroke-width: 0.42; filter: drop-shadow(0 0 1.4px rgba(93, 178, 255, 0.55)); } .mt-seatdot-g.is-pmr-big .mt-seatdot-num { font-weight: 700; } .mt-seatdot-g.is-clickable:hover .mt-seatdot:not(.is-selected), .mt-seatdot-g.is-clickable:focus-visible .mt-seatdot:not(.is-selected) { stroke: var(--mt-gold-light, #e3c75e); stroke-width: 0.32; filter: drop-shadow(0 0 1.6px rgba(227, 199, 94, 0.8)); } .mt-seatdot-num { font-weight: 800; pointer-events: none; user-select: none; } /* Rótulos del lienzo */ .mt-seatmap-pista { fill: var(--mt-gold-light, #e3c75e); font-weight: 800; letter-spacing: 0.12em; opacity: 0.95; } .mt-seatmap-rowlab { fill: rgba(255, 255, 255, 0.38); font-weight: 700; } .mt-seatmap-seclab { fill: rgba(255, 255, 255, 0.9); stroke: rgba(15, 10, 20, 0.7); stroke-width: 0.95px; } .mt-seatmap-headnote { color: var(--mt-ink-soft, #4a4360); } /* ── Chips de sector y conmutador de vista: integrados en el tema claro ── */ .mt-sector-chips { margin-top: 16px; } .mt-sector-btn--chip { background: var(--mt-paper, #fff); border: 1px solid var(--mt-line, #e7e0d2); box-shadow: 0 2px 8px rgba(28, 21, 48, 0.06); } .mt-sector-btn--chip .mt-sector-letter { color: var(--mt-ink); font-size: 1rem; } .mt-sector-btn--chip .mt-sector-avail { color: var(--mt-ink-soft, #4a4360); } .mt-sector-btn--chip:hover:not(:disabled) { border-color: var(--mt-accent); transform: translateY(-2px); box-shadow: var(--mt-shadow-lift); } .mt-sector-btn--chip.is-soldout { opacity: 0.5; } .mt-sector-hint { text-align: center; color: var(--mt-ink-soft, #4a4360); } .mt-seatview-toggle { margin: 2px 0 14px; } .mt-viewsel-btn { background: var(--mt-paper, #fff); border: 1px solid var(--mt-line, #e7e0d2); color: var(--mt-ink-soft, #4a4360); } .mt-viewsel-btn:hover { border-color: var(--mt-accent); color: var(--mt-ink); } .mt-viewsel-btn.is-active { background: var(--mt-navy); border-color: var(--mt-navy); color: #fff; box-shadow: none; } .mt-sector-back { border-radius: 999px; padding: 7px 16px; background: var(--mt-paper, #fff); border: 1px solid var(--mt-line, #e7e0d2); color: var(--mt-ink-soft, #4a4360); font-weight: 700; transition: border-color 0.15s, color 0.15s, transform 0.15s; } .mt-sector-back:hover { border-color: var(--mt-accent); color: var(--mt-ink); transform: translateX(-2px); } /* ── Plano en el visor y en el resumen ── */ .mt-realmap { border-radius: var(--mt-radius-sm, 12px); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(197, 160, 40, 0.25), 0 10px 26px rgba(28, 21, 48, 0.22); } .mt-realmap-img { border-radius: 0; } .mt-realmap svg.mt-realmap-img { background: radial-gradient(120% 90% at 50% 0%, rgba(197, 160, 40, 0.10), transparent 55%), linear-gradient(180deg, #251b2e 0%, #1a1322 100%); display: block; } .mt-realmap-sector { stroke: var(--mt-gold-light, #e3c75e); } .mt-realmap-dot { fill: var(--mt-gold-light, #e3c75e); } .mt-realmap-dot-halo { stroke: var(--mt-gold-light, #e3c75e); } .mt-summary-map { padding: clamp(14px, 3vw, 22px) clamp(14px, 3vw, 22px) 4px; } .mt-summary-map-caption { color: var(--mt-ink-soft, #4a4360); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; } @media (max-width: 640px) { .mt-seatmap-frame { border-radius: var(--mt-radius-sm, 12px); } .mt-sector-tag-letter { font-size: 6.2px; } } /* Resaltado por color sobre la imagen del mapa */ .mt-realmap-mask { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: auto; } .mt-sectormap-mask { pointer-events: none; } /* ───────── Móvil: ajustes finos (minimalista) ───────── */ @media (max-width: 560px) { .mt-flow-step { min-width: 0; } .mt-zone-map-container { -webkit-overflow-scrolling: touch; } .mt-progress { gap: 8px; justify-content: space-between; } .mt-progress-step { flex: 1 1 0; min-width: 0; } .mt-progress-label { text-align: center; } /* Pill cantidad+continuar pegado abajo, siempre a mano */ .mt-step-footer:has(.mt-quantity-field) { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 50; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } /* Evita el zoom automático de iOS en controles */ .mt-quantity-select { font-size: 16px; } .mt-manual-layout { gap: 14px; } .mt-selected-seats-list { gap: 6px; } .mt-seat-badge { font-size: 0.8rem; padding: 7px 12px; } .mt-summary-total-amount { font-size: 1.4rem; } } @media (max-width: 380px) { .mt-progress-label { font-size: 0.62rem; } .mt-step-title { font-size: 1.05rem; } } /* ───────── Pan + zoom de los planos ───────── */ .mt-panzoom { position: relative; overflow: hidden; } .mt-panzoom-layer { position: relative; transform-origin: 0 0; /* will-change se activa dinámicamente en JS solo durante el gesto para que el SVG se re-rasterice nítido al soltar (evita el escalado pixelado). */ will-change: auto; } .mt-panzoom.is-zoomed { cursor: grab; } .mt-panzoom.is-zoomed:active { cursor: grabbing; } .mt-panzoom-ctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 6; } .mt-pz-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(19, 26, 61, 0.82); color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1; cursor: pointer; backdrop-filter: blur(3px); transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; -webkit-tap-highlight-color: transparent; } .mt-pz-btn:hover { background: var(--mt-accent, #fe3331); border-color: var(--mt-accent, #fe3331); } .mt-pz-btn:active { transform: scale(0.94); } @media (max-width: 560px) { .mt-pz-btn { width: 38px; height: 38px; } .mt-panzoom-ctl { top: 8px; right: 8px; } } /* ───────── Visor 3D fiel (órbita) ───────── */ .mt-3d-orbit { cursor: grab; touch-action: pan-y; } .mt-3d-orbit:active { cursor: grabbing; } .mt-3d-seat { pointer-events: none; } .mt-3d-seat-sel { fill: var(--mt-accent, #fe3331); stroke: #fff; stroke-width: 1; pointer-events: none; } .mt-3d-hint { color: #9a9486; font-size: 0.75rem; text-align: center; margin: 6px 0 0; user-select: none; } /* ───────── Chip flotante de reserva (cuenta atrás) ───────── */ .mt-hold-timer { position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 99998; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--mt-navy, #131a3d); color: #fff; border-radius: 999px; box-shadow: 0 10px 28px rgba(19, 26, 61, 0.4); font-size: 0.85rem; animation: mt-hold-in 0.35s cubic-bezier(0.34, 1.4, 0.64, 1); transition: transform 0.25s ease, padding 0.25s ease; } @keyframes mt-hold-in { from { opacity: 0; transform: translateY(16px) scale(0.9); } to { opacity: 1; transform: none; } } .mt-hold-timer-icon { font-size: 1.05rem; line-height: 1; } .mt-hold-timer-body { display: flex; flex-direction: column; line-height: 1.15; } .mt-hold-timer-time { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .mt-hold-timer-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.65); white-space: nowrap; } /* Entrada destacada: un poco más grande los primeros segundos */ .mt-hold-timer.is-intro { transform: scale(1.08); padding: 13px 20px; } /* Último minuto: rojo de marca y pulso */ .mt-hold-timer.is-warning { background: var(--mt-accent, #fe3331); animation: mt-hold-pulse 1s ease-in-out infinite; } .mt-hold-timer.is-warning .mt-hold-timer-label { color: rgba(255, 255, 255, 0.85); } @keyframes mt-hold-pulse { 0%, 100% { box-shadow: 0 10px 28px rgba(254, 51, 49, 0.45); } 50% { box-shadow: 0 10px 34px rgba(254, 51, 49, 0.75); transform: scale(1.03); } } /* Modal de reserva caducada */ .mt-expired-modal { backdrop-filter: blur(3px); } .mt-expired-icon { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 1.7rem; border-radius: 50%; background: rgba(254, 51, 49, 0.1); color: var(--mt-accent, #fe3331); } @media (prefers-reduced-motion: reduce) { .mt-hold-timer, .mt-hold-timer.is-warning { animation: none !important; } } /* ═════════════ Móvil tipo app ═════════════ */ @media (max-width: 560px) { /* Barra de progreso: cabecera fija estilo app */ .mt-progress { position: sticky; top: 0; z-index: 70; margin: -16px -12px 16px; padding: 10px 16px 9px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--mt-line); } .mt-progress::before { top: 22px; } .mt-progress-dot { width: 28px; height: 28px; font-size: 0.8rem; border-width: 2px; } .mt-progress-label { font-size: 0.64rem; letter-spacing: 0.02em; } /* Footers de acción: barra inferior fija estilo app */ .mt-step-footer:not(:has(.mt-quantity-field)) { position: sticky; bottom: 0; z-index: 60; margin: 18px -12px calc(-1 * max(24px, env(safe-area-inset-bottom))); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-radius: 0; border-left: none; border-right: none; border-bottom: none; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08); } /* Tarjetas y controles con aire de app nativa */ .mt-zone-card { border-radius: 14px; padding: 16px 10px 13px; } .mt-zone-card-name { font-size: 0.95rem; } .mt-option { border-radius: 14px; padding: 14px 14px; } .mt-order-summary { border-radius: 14px; } .mt-btn { min-height: 50px; border-radius: 14px; } .mt-step-title { font-weight: 800; } /* Chip de reserva: arriba a la derecha para no tapar la barra inferior */ .mt-hold-timer { left: auto; right: 10px; bottom: auto; top: calc(56px + env(safe-area-inset-top)); padding: 8px 13px; } .mt-hold-timer.is-intro { transform: scale(1.05); } /* Visor 3D: pista de arrastre más clara */ .mt-3d-hint { font-size: 0.7rem; } } /* ───────── Visor 3D en pantallas pequeñas: grande y protagonista ───────── */ @media (max-width: 560px) { /* El visor ocupa todo el ancho de la pantalla (a sangre) */ .mt-venue-viewer { margin-left: -12px; margin-right: -12px; border-radius: 0; padding: 14px 8px 12px; } .mt-venue-viewer-stage { margin: 0; } .mt-venue-3d { max-height: none; width: 100%; } /* Aviso de arrastre: debajo del mapa, centrado y con aire */ .mt-3d-hint { display: block; margin: 10px auto 2px; font-size: 0.78rem; text-align: center; } } /* ───────── Stepper de cantidad (− n +) dentro del pill ───────── */ .mt-qty-header { margin-top: clamp(22px, 4vw, 34px); margin-bottom: 4px; } .mt-step-footer:has(.mt-quantity-field) .mt-quantity-field { flex-direction: row; align-items: center; gap: 0; padding: 0 10px 0 8px; } .mt-qty-stepper { display: flex; align-items: center; gap: 2px; } .mt-qty-btn { width: 40px; height: 40px; display: grid; place-items: center; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease; -webkit-tap-highlight-color: transparent; } .mt-qty-btn:hover:not(:disabled) { background: var(--mt-accent, #fe3331); } .mt-qty-btn:active:not(:disabled) { transform: scale(0.92); } .mt-qty-btn:disabled { opacity: 0.3; cursor: default; } .mt-qty-value { min-width: 46px; text-align: center; font-size: 1.55rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; user-select: none; transition: color 0.15s ease; } .mt-qty-value.is-empty { color: rgba(255, 255, 255, 0.35); font-weight: 600; } .mt-qty-stepper.is-bump .mt-qty-value { animation: mt-qty-bump 0.2s ease; } @keyframes mt-qty-bump { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } } /* Continuar deshabilitado dentro del pill: apagado pero legible */ .mt-step-footer:has(.mt-quantity-field) .mt-continue-btn:disabled { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.45); box-shadow: none; cursor: not-allowed; } @media (max-width: 560px) { .mt-qty-btn { width: 44px; height: 44px; } .mt-qty-value { min-width: 40px; font-size: 1.45rem; } } /* ───────── Nitidez con zoom ───────── Los drop-shadow por butaca fuerzan capas rasterizadas cacheadas (borrosas al escalar). Con zoom activo se retiran: mapa nítido y más fluido. */ .mt-panzoom.is-zoomed .mt-seatdot, .mt-panzoom.is-zoomed .mt-seatdot-g .mt-seatdot { filter: none !important; } /* ───────── Plano de zonas del paso 1 ───────── Todas las butacas coloreadas por zona; la zona bajo el cursor (o elegida) se resalta y el resto se atenúa. Mismo lienzo oscuro que los otros mapas. */ .mt-zone-preview { max-width: 640px; margin: 0 auto clamp(14px, 3vw, 22px); padding: 12px 12px 4px; border-radius: var(--mt-radius, 16px); background: radial-gradient(120% 90% at 50% 0%, rgba(197, 160, 40, 0.08), transparent 55%), linear-gradient(180deg, #251b2e 0%, #1a1322 100%); box-shadow: inset 0 0 0 1px rgba(197, 160, 40, 0.22), 0 12px 30px rgba(28, 21, 48, 0.25); } .mt-zonepreview-svg { display: block; width: 100%; height: auto; max-height: 300px; } .mt-zonepreview-svg circle { transition: fill-opacity 0.15s ease; } .mt-zonepreview-pista { fill: var(--mt-gold-light, #e3c75e); font-size: 2.4px; font-weight: 800; letter-spacing: 0.02em; pointer-events: none; } .mt-zonepreview-hint { text-align: center; color: #9a9486; font-size: 0.74rem; margin: 6px 0 6px; user-select: none; } @media (max-width: 560px) { .mt-zone-preview { padding: 8px 8px 2px; } .mt-zonepreview-svg { max-height: 240px; } } /* ── Ofertas y tarifas en el resumen (paso 3) ─────────────────────────────── */ .mt-summary-offers { margin: 14px 0 4px; padding-top: 14px; border-top: 1px dashed var(--mt-line); } .mt-summary-offers-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mt-ink-soft); font-weight: 700; margin: 0 0 10px; } .mt-offer-row { display: block; border: 1px solid var(--mt-line); border-radius: var(--mt-radius-sm); padding: 12px 14px; margin: 0 0 10px; background: #fff; } .mt-offer-row--checkbox { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; } .mt-offer-check { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--mt-accent); } .mt-offer-row-body { display: block; } .mt-offer-row-title { display: block; font-weight: 700; color: var(--mt-ink); font-size: 0.95rem; } .mt-offer-row-badge { display: inline-block; background: var(--mt-accent); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; } .mt-offer-row-decl { display: block; margin-top: 5px; font-size: 0.8rem; line-height: 1.5; color: var(--mt-ink-soft); } .mt-offer-coupon-field { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .mt-offer-code { /* min-width:0 es imprescindible: sin él un nunca encoge por debajo de su ancho intrínseco y en móvil desbordaba la tarjeta, dejando el campo medio fuera de pantalla (parecía que «no se podía escribir»). */ flex: 1 1 140px; min-width: 0; max-width: 100%; padding: 9px 12px; border: 1px solid var(--mt-line); border-radius: var(--mt-radius-sm); font-size: 0.9rem; text-transform: uppercase; -webkit-appearance: none; appearance: none; background: #fff; color: var(--mt-ink); } .mt-offer-code:disabled { background: #f4f4f2; color: var(--mt-ink-soft); } .mt-offer-apply { flex: 0 0 auto; padding: 9px 16px; } .mt-offer-code-msg { font-size: 0.8rem; margin-top: 6px; min-height: 1em; } .mt-offer-code-msg.is-ok { color: #1a7f4e; } .mt-offer-code-msg.is-err { color: var(--mt-accent-dark); } /* Texto informativo del descuento, bajo el campo del código. */ .mt-offer-row-info { margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--mt-line); font-size: 0.82rem; line-height: 1.55; color: var(--mt-ink-soft); } .mt-offer-row-info > *:first-child { margin-top: 0; } .mt-offer-row-info > *:last-child { margin-bottom: 0; } .mt-offer-row-info p { margin: 0 0 6px; } .mt-offer-row-info ul, .mt-offer-row-info ol { margin: 0 0 6px; padding-left: 18px; } .mt-offer-row-info li { margin: 0 0 3px; } .mt-offer-row-info a { color: var(--mt-accent-dark); font-weight: 600; } .mt-offer-row-info strong { color: var(--mt-ink); } /* ── Código de descuento en móvil ───────────────────────────────────────── El campo y el botón se apilan a todo el ancho (en 320 px no caben en línea) y la fuente sube a 16 px: por debajo de ese tamaño iOS hace zoom automático al enfocar y el campo se sale de la pantalla. */ @media (max-width: 560px) { .mt-offer-coupon-field { flex-direction: column; gap: 8px; } .mt-offer-code { flex: 1 1 auto; width: 100%; font-size: 16px; min-height: 48px; padding: 11px 14px; } .mt-offer-apply { width: 100%; min-height: 48px; } /* Sitio para que el teclado no deje el campo debajo de la barra fija. */ .mt-offer-row--coupon { scroll-margin-bottom: 140px; } } /* Mientras se escribe un código, la barra de acciones fija del móvil deja de ser sticky: si no, con el teclado abierto se planta encima del campo y los toques van a la barra en lugar de al input. */ body.mt-editing-field .mt-step-footer:not(:has(.mt-quantity-field)) { position: static; box-shadow: none; } body.mt-editing-field .mt-hold-timer { display: none; } .mt-summary-discount-row { display: flex; justify-content: space-between; align-items: center; color: #1a7f4e; font-weight: 700; font-size: 0.92rem; margin: 0 0 6px; } /* ══════════════════════════════════════════════════════════════════════════ TEMA CLARO de los mapas (cuadrícula, selector de sectores, plano y visor). Va al final del fichero para ganar la cascada a las reglas oscuras. ══════════════════════════════════════════════════════════════════════════ */ /* Cuadrícula del recinto */ .mt-grid-map { background: #f6f4ee; box-shadow: inset 0 0 0 1px #e5e1d6; } .mt-ghead, .mt-grow { color: #8a8578; } .mt-gempty { box-shadow: inset 0 0 0 1px #ddd8cb; } .mt-gaisle { background: repeating-linear-gradient(45deg, #e8e4d9, #e8e4d9 4px, #dfdacd 4px, #dfdacd 8px); } .mt-gseat.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1A1A1A; } /* Selector de sectores */ .mt-sector-picker { background: #f6f4ee; box-shadow: inset 0 0 0 1px #e5e1d6; } .mt-sector-btn { background: #ffffff; border-color: #ddd8cb; color: #1A1A1A; } .mt-sector-btn:hover:not(:disabled) { background: #fdf9ef; border-color: var(--mt-gold, #C5A028); } .mt-sector-avail { color: #7a7568; } .mt-sector-hint { color: #8a8578; } .mt-sector-back { border-color: #cfc9ba; color: #6a6557; } .mt-sector-back:hover { color: #1A1A1A; } .mt-sector-btn--chip { background: #ffffff; border-color: #ddd8cb; } /* Cuadrícula por zona */ .mt-zonegrid { background: #f6f4ee; box-shadow: inset 0 0 0 1px #e5e1d6; } .mt-zg-empty { color: #8a8578; } /* Plano SVG por sectores */ .mt-sectormap { background: #f6f4ee; box-shadow: inset 0 0 0 1px #e5e1d6, 0 6px 20px rgba(0, 0, 0, .08); } .mt-sectormap-dim { fill: rgba(255, 255, 255, .45); } .mt-sectormap-stage { fill: #e9e4d7; stroke: #cfc9ba; } .mt-sectormap-stagetxt { fill: #6a6557; } .mt-sector-hit { fill: rgba(0, 0, 0, .03); stroke: rgba(0, 0, 0, .35); } /* Toggle de vista (plano / cuadrícula) */ .mt-viewsel-btn { background: #ffffff; border-color: #ddd8cb; color: #6a6557; } .mt-viewsel-btn:hover { color: #1A1A1A; } .mt-viewsel-btn.is-active { background: var(--mt-gold, #C5A028); border-color: var(--mt-gold, #C5A028); color: #1A1A1A; } /* Visor «Tu posición en el recinto» */ .mt-venue-viewer { background: #f6f4ee; box-shadow: inset 0 0 0 1px #e5e1d6; } .mt-venue-viewer-modes { background: rgba(0, 0, 0, .06); } .mt-venue-viewer-hint { color: #8a8578; } /* Resumen: mapa de tus butacas */ .mt-summary-map .mt-sectormap { background: #f6f4ee; } /* ══════════════════════════════════════════════════════════════════════════ Seguro de compra (paso Confirmar) ══════════════════════════════════════════════════════════════════════════ */ .mt-insurance { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0; padding: 14px 16px; border: 1px solid var(--mt-gold, #C5A028); border-radius: 10px; background: #fdf9ef; cursor: pointer; } .mt-insurance input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; accent-color: #fe3331; flex: 0 0 auto; } .mt-insurance-title { display: block; font-weight: 800; font-size: 0.95rem; } .mt-insurance-desc { display: block; color: #6a6557; font-size: 0.85rem; margin-top: 4px; line-height: 1.5; } .mt-insurance-desc p { margin: 0 0 6px; } .mt-insurance-desc p:last-child { margin-bottom: 0; } .mt-insurance-desc ul, .mt-insurance-desc ol { margin: 5px 0 0; padding-left: 20px; } .mt-insurance-desc a { color: inherit; font-weight: 700; text-decoration: underline; } .mt-insurance-note { display: block; color: #9a9486; font-size: 0.78rem; margin-top: 6px; } /* ══════════════════════════════════════════════════════════════════════════ Tarjetas de zona INFORMATIVAS (nuevo flujo): hover con animación que destaca la zona (la zona también se ilumina en el plano vía JS). ══════════════════════════════════════════════════════════════════════════ */ .mt-zone-card--info { position: relative; } .mt-zone-card--info:not(:disabled):hover, .mt-zone-card--info:not(:disabled):focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .16); border-color: var(--mt-zone-color, #C5A028); } .mt-zone-card--info:not(:disabled):hover .mt-zone-card-swatch { animation: mt-zone-pulse 1.1s ease-in-out infinite; } @keyframes mt-zone-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--mt-zone-color, #C5A028); } 50% { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); } } .mt-zone-card--info .mt-zone-card-check { display: none; } .mt-zone-card-cta { display: block; margin-top: 6px; font-size: 0.78rem; font-weight: 800; color: var(--mt-zone-color, #C5A028); opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; } /* Plano y secciones: la lista es una leyenda compacta, nunca un selector. */ .mt-zones-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(185px, 225px); gap: clamp(12px, 2.5vw, 24px); align-items: stretch; max-width: 880px; margin: 0 auto clamp(20px, 4vw, 34px); } .mt-zones-overview .mt-zone-preview { max-width: none; width: 100%; margin: 0; } .mt-zones-overview .mt-zones-grid { display: flex; flex-direction: column; justify-content: center; gap: 7px; margin: 0; } .mt-zones-overview .mt-zone-card { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "swatch name price" "swatch available available" "swatch badge badge"; align-items: center; gap: 2px 9px; padding: 9px 10px; border-width: 1px; border-radius: 11px; text-align: left; cursor: default; overflow: visible; } .mt-zones-overview .mt-zone-card::before { display: none; } .mt-zones-overview .mt-zone-card-swatch { grid-area: swatch; width: 10px; height: 10px; margin: 0; } .mt-zones-overview .mt-zone-card-name { grid-area: name; font-size: .84rem; } .mt-zones-overview .mt-zone-card-price { grid-area: price; font-size: .84rem; white-space: nowrap; } /* En la rejilla compacta los dos precios se apilan si no caben en la línea. */ .mt-zones-overview .mt-zone-card-price--discounted { white-space: normal; justify-content: flex-end; text-align: right; } .mt-zones-overview .mt-zone-card-price-old { font-size: .74rem; } .mt-zones-overview .mt-zone-card-available { grid-area: available; padding: 0; background: none; font-size: .67rem; } .mt-zones-overview .mt-zone-card--soldout { opacity: .62; cursor: default; filter: grayscale(.35); } .mt-guardians-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; max-width: 760px; margin: 0 auto clamp(24px, 4vw, 38px); padding: clamp(18px, 3vw, 26px); background: linear-gradient(135deg, #21162a, #38213b); color: #fff; border: 1px solid rgba(227,199,94,.45); border-radius: 18px; box-shadow: 0 14px 34px rgba(28,21,48,.18); } .mt-guardians-mark { width: 48px; height: 48px; display:grid; place-items:center; border-radius:50%; background:#c5a028; color:#21162a; font-size:24px; } .mt-guardians-kicker { margin:0 0 3px; color:#e3c75e; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .mt-guardians-card h3 { margin:0 0 7px; color:#fff; font-size:clamp(1.15rem,3vw,1.45rem); } .mt-guardians-card p { margin:0 0 10px; color:#eee8f0; line-height:1.5; } .mt-guardians-card .mt-guardians-includes { color:#e3c75e; font-weight:800; margin-bottom:5px; } .mt-guardians-card ul { margin:0 0 9px; padding-left:19px; color:#fff; line-height:1.55; } .mt-guardians-card small { color:#bdb2c1; line-height:1.45; } @media (max-width: 700px) { .mt-zones-overview { grid-template-columns: 1fr; } .mt-zones-overview .mt-zones-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } } /* En pantalla táctil la tarjeta de sección SÍ es pulsable: lleva directamente al selector de cantidad, así que se comporta como un botón. */ @media (max-width: 760px) { .mt-zones-overview .mt-zone-card--info { cursor: pointer; -webkit-tap-highlight-color: transparent; } .mt-zones-overview .mt-zone-card--info:active { transform: scale(0.985); } .mt-zones-overview .mt-zone-card--info.mt-zone-card--soldout { cursor: default; } } @media (max-width: 440px) { .mt-zones-overview .mt-zones-grid { grid-template-columns:1fr; } .mt-guardians-card { grid-template-columns:1fr; } } .mt-zone-card--info:not(:disabled):hover .mt-zone-card-cta, .mt-zone-card--info:not(:disabled):focus-visible .mt-zone-card-cta { opacity: 1; transform: translateY(0); } /* ══════════════════════════════════════════════════════════════════════════ TEMA CLARO (2ª pasada): los lienzos oscuros que quedaban — plano de zonas del paso 1, plano dibujado del visor/resumen y marco del mapa de sectores. ══════════════════════════════════════════════════════════════════════════ */ /* Plano de zonas del paso 1 */ .mt-zone-preview { background: #f6f4ee; box-shadow: inset 0 0 0 1px #e5e1d6, 0 8px 22px rgba(0, 0, 0, .08); } .mt-zonepreview-pista { fill: #8a7a34; } .mt-zonepreview-hint { color: #8a8578; } /* Plano dibujado (SVG) del visor y del resumen */ .mt-realmap svg.mt-realmap-img { background: #f6f4ee; } .mt-realmap { box-shadow: inset 0 0 0 1px #e5e1d6, 0 8px 22px rgba(0, 0, 0, .10); } .mt-realmap-sector { stroke: #a8842b; } .mt-realmap-dot { fill: #b5192f; } .mt-realmap-dot-halo { stroke: #b5192f; } .mt-summary-map-caption { color: #6a6557; } /* Marco del mapa de sectores (si usa lienzo propio) */ .mt-seatmap-frame, .mt-seatmap-stage-wrap { background: #f6f4ee !important; box-shadow: inset 0 0 0 1px #e5e1d6; } .mt-seatmap-veil { fill: rgba(246, 244, 238, 0.62); } .mt-seatmap-frame { box-shadow: inset 0 0 0 1px #e5e1d6 !important; } /* ── Obstáculos del recinto en el mapa del cliente ─────────── */ .mt-obstacle { pointer-events: auto; } .mt-obstacle-col { fill: #9ca3af; stroke: #6b7280; stroke-width: 0.25; } .mt-obstacle-tower { fill: #6b7280; stroke: #4b5563; stroke-width: 0.25; } .mt-obstacle-tower-mast { fill: none; stroke: #f6f4ee; stroke-width: 0.3; stroke-linecap: round; stroke-linejoin: round; } /* ── Plano técnico del recinto (pestaña «Mapa del recinto») ── */ .mt-techmap-wrap { background: #ffffff; } /* Banda de la ZONA (sección de color) dentro del sector de tus butacas: lo único que se pinta sobre el plano técnico. */ .mt-tech-zone { fill-opacity: 0.5; stroke-width: 0.5; stroke-opacity: 0.95; animation: mt-tech-pulse 1.6s ease-in-out infinite; } @keyframes mt-tech-pulse { 0%, 100% { fill-opacity: 0.5; } 50% { fill-opacity: 0.3; } } .mt-tech-sector-label { font-size: 4.2px; font-weight: 800; fill: #1A1A1A; paint-order: stroke; stroke: #ffffff; stroke-width: 0.5; pointer-events: none; } .mt-tech-sector-label.is-mine { font-size: 5px; } @media (prefers-reduced-motion: reduce) { .mt-tech-zone { animation: none; } } /* ── Piezas exactas del plano técnico (efecto de revelado) ── */ .mt-tech-veil { fill: #ffffff; fill-opacity: 0.62; transition: fill-opacity .2s ease; } .mt-tech-piece { fill: none; stroke-width: 0.45; stroke-linejoin: round; filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.35)); } /* ── Experiencia especial: badge + tooltip en la tarjeta de zona ──────────── */ .mt-zone-card { position: relative; } .mt-zone-card-xp-badge { display: inline-block; grid-area: badge; white-space: nowrap; width: max-content; max-width: 100%; margin-top: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; color: var(--mt-gold, #c5a028); text-transform: uppercase; } .mt-zone-tooltip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(6px); width: min(320px, 86vw); background: #131a3d; color: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; z-index: 40; text-align: left; } .mt-zone-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: #131a3d; } .mt-zone-card:hover .mt-zone-tooltip, .mt-zone-card:focus-within .mt-zone-tooltip, .mt-zone-card-xp-badge:hover + .mt-zone-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .mt-zone-tooltip-kicker { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mt-gold, #c5a028); margin-bottom: 2px; } .mt-zone-tooltip-title { font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; } .mt-zone-tooltip-body p { margin: 0 0 6px; font-size: 0.86rem; line-height: 1.5; } .mt-extras-list { margin: 4px 0 0; padding-left: 18px; } .mt-extras-list li { font-size: 0.86rem; line-height: 1.5; margin-bottom: 4px; } /* Bloque de experiencia en el paso Confirma tu compra. */ .mt-summary-experience { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid var(--mt-gold, #c5a028); border-radius: 14px; background: linear-gradient(180deg, rgba(197,160,40,0.08), rgba(197,160,40,0.02)); } .mt-summary-experience .mt-zone-tooltip-kicker { color: var(--mt-gold, #c5a028); } .mt-summary-experience .mt-summary-xp-title { font-size: 1.05rem; font-weight: 800; color: var(--mt-ink, #141414); margin: 2px 0 8px; } .mt-summary-experience p { margin: 0 0 6px; font-size: 0.88rem; line-height: 1.55; color: var(--mt-ink-soft, #5c5c5c); } .mt-summary-experience .mt-extras-list li { color: var(--mt-ink-soft, #5c5c5c); } /* Pestañas del mapa en confirmación. */ .mt-summary-map-tabs { display: flex; gap: 6px; margin: 0 0 8px; } .mt-summary-map-tab { border: 1px solid var(--mt-line, #e5e5e5); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--mt-ink-soft, #5c5c5c); } .mt-summary-map-tab.is-active { background: var(--mt-navy, #131a3d); border-color: var(--mt-navy, #131a3d); color: #fff; }