/* ========================================================================== REDISEÑO 2026 — mi ticketera Cabecera (2 barras) de uso global + página de buscador de eventos (/busqueda/eventos y /eventos/{slug}, plantilla listTypeList.html.twig) Namespacing: todo lo global usa el prefijo "mtk-" para no chocar con las clases genéricas de la plantilla antigua (Bootstrap 3). Las reglas propias de la página de resultados están además anidadas bajo ".mtk-search" para no afectar a otras páginas que reutilizan clases como ".box-event", ".event-item" o ".card" (necesarias tal cual para el scroll infinito). ========================================================================== */ /* Salvaguarda: un solo elemento que no encoja (un largos (p.ej. el listado de provincias) tienen un ancho intrínseco propio; sin min-width:0 la celda del grid no encoge por debajo de ese ancho y desborda la página en pantallas estrechas. */ min-width: 0; } .mtk-search .mtk-field:focus-within { border-color: var(--mtk-orange); } .mtk-search .mtk-field label { font-size: 10.56px; letter-spacing: .07em; text-transform: uppercase; color: var(--mtk-muted); font-weight: 700; } .mtk-search .mtk-field input.mtk-input, .mtk-search .mtk-field select.mtk-input { border: none; outline: none; font-size: 14.72px; color: var(--mtk-ink); background: transparent; padding: 2px 0; width: 100%; -webkit-appearance: none; appearance: none; } .mtk-search .mtk-field select.mtk-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23767670' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 16px; } .mtk-search .mtk-finder button.mtk-go { background: var(--mtk-orange); color: #fff; border: none; border-radius: var(--mtk-radius-s); padding: 0 28px; font-weight: 700; font-size: 14.72px; cursor: pointer; } .mtk-search .mtk-finder button.mtk-go:hover { background: var(--mtk-orange-hover); } @media (max-width: 860px) { .mtk-search .mtk-finder { grid-template-columns: 1fr 1fr; } .mtk-search .mtk-finder button.mtk-go { grid-column: 1 / -1; padding: 12px; } } /* -------- chips de categoría rápida -------- */ .mtk-search .mtk-quick-cats { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; } .mtk-search .mtk-pill { border: 1px solid var(--mtk-line); background: var(--mtk-surface); color: var(--mtk-ink-soft); font-size: 13.12px; font-weight: 600; padding: 7px 15px; border-radius: 999px; } .mtk-search .mtk-pill:hover { border-color: var(--mtk-orange); color: var(--mtk-orange-hover); } .mtk-search .mtk-pill.active { background: var(--mtk-orange); border-color: var(--mtk-orange); color: #fff; } /* -------- barra de resultados -------- */ .mtk-search .mtk-results-bar { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .mtk-search .mtk-results-count { font-size: 14.4px; color: var(--mtk-muted); } .mtk-search .mtk-results-count strong { color: var(--mtk-ink); font-weight: 700; } .mtk-search .mtk-sort-field { display: flex; align-items: center; gap: 8px; font-size: 13.44px; color: var(--mtk-muted); } .mtk-search .mtk-sort-field select { border: 1px solid var(--mtk-line); background: var(--mtk-surface); color: var(--mtk-ink); border-radius: var(--mtk-radius-s); padding: 7px 10px; font-size: 13.44px; } /* -------- grid de eventos -------- */ .mtk-search .mtk-results { padding-top: 18px; } .mtk-search .box-event.mtk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } @media (max-width: 1360px) { .mtk-search .box-event.mtk-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 980px) { .mtk-search .box-event.mtk-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .mtk-search .box-event.mtk-grid { grid-template-columns: 1fr; } } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .event-item.mtk-card, :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .place-item.mtk-card { background: var(--mtk-surface); border-radius: var(--mtk-radius-m); overflow: hidden; box-shadow: var(--mtk-shadow); transition: box-shadow .2s ease, transform .2s ease; display: flex; flex-direction: column; padding: 0; width: 100%; float: none; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .event-item.mtk-card:hover, :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .place-item.mtk-card:hover { box-shadow: var(--mtk-shadow-hover); transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .event-item.mtk-card, :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .place-item.mtk-card, :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .event-item.mtk-card img, :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .place-item.mtk-card img { transition: none !important; transform: none !important; } } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mtk-surface-2); } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .event-item.mtk-card:hover .mtk-media img, :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .place-item.mtk-card:hover .mtk-media img { transform: scale(1.045); } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-chip-cat { position: absolute; top: 12px; left: 12px; background: rgba(35,35,35,.74); color: #fff; font-size: 10.56px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 5px 10px; border-radius: 999px; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-chip-status { position: absolute; top: 12px; right: 12px; font-size: 10.56px; letter-spacing: .03em; font-weight: 700; padding: 5px 10px; border-radius: 999px; color: #fff; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-chip-status.mtk-low { background: var(--mtk-orange); } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-chip-status.mtk-soldout { background: var(--mtk-danger); } /* separación con perforado, guiño al icono de la marca */ :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-perforation { height: 14px; background: radial-gradient(circle at 10px 50%, transparent 5px, var(--mtk-surface) 5.5px); background-size: 20px 100%; background-repeat: repeat-x; position: relative; margin-top: -14px; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-perforation::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; top: 6px; border-top: 1px dashed var(--mtk-line); } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-date-title-row { display: flex; gap: 12px; align-items: flex-start; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-date-block { font-family: var(--mtk-font-display); text-align: center; line-height: 1; flex: none; width: 44px; padding-top: 2px; border-right: 1px solid var(--mtk-line); padding-right: 12px; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-date-block .mtk-mon { display:block; font-size: 9.92px; letter-spacing: .07em; text-transform: uppercase; color: var(--mtk-orange-hover); font-weight: 700; margin-bottom: 3px; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-date-block .mtk-day { display:block; font-size: 22.4px; font-weight: 700; color: var(--mtk-ink); } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-card-body h2 { font-family: var(--mtk-font-display); font-size: 17.28px; line-height: 1.28; margin: 0; font-weight: 700; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-card-body h2 a { color: var(--mtk-ink); } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-venue { font-size: 12.8px; color: var(--mtk-muted); display: flex; align-items: flex-start; gap: 5px; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-venue svg { flex: none; opacity: .7; margin-top: 2px; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--mtk-line); } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-price-tag { font-size: 12.48px; color: var(--mtk-muted); } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-price-tag strong { display: block; font-family: var(--mtk-font-display); font-size: 18.4px; color: var(--mtk-ink); font-variant-numeric: tabular-nums; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-price-tag strong.mtk-free { color: var(--mtk-teal); } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-buy-btn { border: 1.5px solid var(--mtk-orange); color: var(--mtk-orange-hover); background: transparent; padding: 9px 14px; border-radius: var(--mtk-radius-s); font-weight: 700; font-size: 12.8px; white-space: nowrap; display: inline-block; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-buy-btn:hover { background: var(--mtk-orange); color: #fff; } :is(.mtk-search, .mtk-home, .mtk-places, .mtk-profile) .mtk-buy-btn.mtk-disabled { border-color: var(--mtk-line); color: var(--mtk-muted); pointer-events: none; } /* -------- estado vacío (global: se reutiliza en varias páginas) -------- */ .mtk-empty { background: var(--mtk-surface); border: 1px dashed var(--mtk-line); border-radius: var(--mtk-radius-m); padding: 34px 26px; text-align: center; color: var(--mtk-muted); font-size: 13.76px; } .mtk-empty p { margin: 6px 0 0; } .mtk-empty a { color: var(--mtk-orange-hover); font-weight: 600; } /* -------- disparador de scroll infinito (jquery-ias) -------- */ .mtk-search .ias-trigger { background: transparent !important; border: 1px solid var(--mtk-line) !important; color: var(--mtk-ink-soft) !important; padding: 12px 30px !important; border-radius: 999px !important; font-weight: 600; font-size: 13.76px; text-align: center; margin-top: 30px !important; box-shadow: none !important; } .mtk-search .ias-trigger a { color: inherit; } .mtk-search .ias-trigger:hover { border-color: var(--mtk-orange) !important; color: var(--mtk-orange-hover) !important; } /* ========================================================================== AVISO DE COOKIES (uso global — baseFrontend.html.twig) Mismos selectores/ids que usa public/js/frontend/custom/cookiesAlert.js, solo se retoca el aspecto. ========================================================================== */ .cookies { font-family: var(--mtk-font-body); position: fixed; bottom: 0; left: 0; right: 0; background: var(--mtk-ink); color: #EDEEEA; text-align: left; z-index: 1000000; padding: 22px 30px; box-shadow: 0 -8px 26px rgba(0,0,0,.22); } .cookies .mtk-wrap { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .cookies__titulo { font-family: var(--mtk-font-display); font-size: 19.2px; font-weight: 700; margin: 0 0 4px; color: #fff; } .cookies__texto { font-size: 13.44px; line-height: 1.5; color: #C7C9C0; margin: 0; max-width: 68ch; flex: 1 1 380px; } .cookies__texto a { color: var(--mtk-orange); text-decoration: underline; } .cookies__botones { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; flex: none; } .cookies__boton { font-family: var(--mtk-font-body); background: transparent; border: 1.5px solid rgba(255,255,255,.35); border-radius: var(--mtk-radius-s); padding: 11px 20px; font-size: 13.44px; font-weight: 700; color: #fff; width: auto; margin: 0; cursor: pointer; } .cookies__boton:hover { border-color: rgba(255,255,255,.7); } .cookies__boton--si { background: var(--mtk-orange); border-color: var(--mtk-orange); } .cookies__boton--si:hover { background: var(--mtk-orange-hover); border-color: var(--mtk-orange-hover); } #configCookies { max-width: 900px; margin-top: 14px !important; font-size: 13.44px; color: #C7C9C0; display: flex; flex-direction: column; gap: 10px; } #configCookies[hidden] { display: none; } #configCookies span { color: #9A9C95; } #configCookies input[type="checkbox"] { margin-right: 6px; } /* ========================================================================== PIE DE PÁGINA (uso global — footerFrontend.html.twig) ========================================================================== */ footer.mtk-footer { background: var(--mtk-ink); color: #C7C9C0; font-family: var(--mtk-font-body); padding: 56px 0 0; } .mtk-footer .mtk-wrap { max-width: 1400px; } .mtk-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); } @media (max-width: 860px) { .mtk-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 30px; } } @media (max-width: 520px) { .mtk-footer-cols { grid-template-columns: 1fr; } } .mtk-footer-cols h4 { font-family: var(--mtk-font-display); font-size: 15.36px; color: #fff; margin: 0 0 14px; font-weight: 700; } .mtk-footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .mtk-footer-cols a { color: #C7C9C0; font-size: 13.44px; } .mtk-footer-cols a:hover { color: var(--mtk-orange); } .mtk-footer-social { display: flex; gap: 10px; margin-bottom: 22px; } .mtk-footer-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; } .mtk-footer-social a:hover { background: var(--mtk-orange); border-color: var(--mtk-orange); } .mtk-footer-payments { display: flex; align-items: center; gap: 8px; } /* Los iconos (visa.png/mastercard.png) ya son la tarjeta completa a color sobre fondo blanco, no un logo monocromo sobre transparente: el filtro brightness(0)+invert(1) que había antes los convertía en un bloque blanco liso e irreconocible sobre el footer oscuro. Los mostramos a color dentro de una placa blanca, como es habitual en pies de página oscuros. */ .mtk-footer-payments img { display: block; height: 22px; width: auto; background: #fff; border-radius: 4px; padding: 3px 5px; } /* mega-lista SEO de provincias: presente para rastreo/enlazado interno, discreta visualmente */ .mtk-footer-provinces { padding: 32px 0; } .mtk-footer-provinces .mtk-eyebrow { color: var(--mtk-orange); display: block; margin-bottom: 16px; } .mtk-footer-provinces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 24px; } @media (max-width: 860px) { .mtk-footer-provinces-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .mtk-footer-provinces-grid { grid-template-columns: 1fr; } } .mtk-footer-provinces-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .mtk-footer-provinces-grid a { font-size: 12.16px; color: #8C8E86; } .mtk-footer-provinces-grid a:hover { color: var(--mtk-orange); } .mtk-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.16px; color: #8C8E86; } .mtk-footer-bottom a { color: #8C8E86; } .mtk-footer-bottom a:hover { color: var(--mtk-orange); } .mtk-footer-bottom .mtk-legal-links { display: flex; gap: 6px; flex-wrap: wrap; } .mtk-footer-bottom .mtk-legal-links span { opacity: .4; } #return-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 200; width: 44px; height: 44px; border-radius: 50%; background: var(--mtk-ink); color: #fff !important; display: none; align-items: center; justify-content: center; box-shadow: var(--mtk-shadow-hover); } #return-to-top:hover { background: var(--mtk-orange); } /* ========================================================================== HOME (Home/home.html.twig) ========================================================================== */ .mtk-home-hero { background: var(--mtk-ink); color: #fff; position: relative; overflow: hidden; } /* Carrusel Bootstrap (.carousel/.carousel-inner/.item, plugin ya cargado sitewide vía bootstrap.min.js): cada diapositiva es una imagen de fondo propia + degradado para legibilidad + el mismo bloque de texto/CTA que antes tenía la única diapositiva estática. Durante la transición, Bootstrap posiciona la diapositiva saliente y la entrante una encima de otra (una en flujo normal, la otra en position:absolute) y dejar que cada una tenga una altura distinta según la longitud de su texto hacía que, mientras se cruzaban, se "descuadrase" el carrusel un instante mostrando ambas imágenes. Fijamos una altura igual para todas las diapositivas para que no haya salto ninguno. */ .mtk-home-hero .carousel-inner, .mtk-home-hero .item { min-height: 520px; } @media (max-width: 700px) { .mtk-home-hero .carousel-inner, .mtk-home-hero .item { min-height: 620px; } } .mtk-home-hero .item { /* OJO: no declarar "position" aquí. Bootstrap ya da position:relative a .item por defecto y position:absolute a .next/.prev durante la transición (misma especificidad que esta regla, pero definida antes en bootstrap.min.css); si esta regla redeclarase position:relative para TODOS los estados, pisaría por orden de cascada el position:absolute de .next/.prev, rompiendo el sistema de superposición de Bootstrap: overflow:hidden del carrusel recorta entonces todo el contenido y solo se ve el fondo negro durante la transición. */ padding: 60px 0; text-align: center; background-size: cover; background-position: center; } /* OJO: el display (none / block / flex) de cada diapositiva lo controla Bootstrap (.item = oculta, .item.active/.next/.prev = visible durante reposo o transición). Si aquí se pone "display:flex" en ".item" sin más, gana por orden de cascada al "display:none" de Bootstrap (misma especificidad) y las 3 diapositivas se quedan visibles a la vez en vertical. Por eso el flex de centrado solo se aplica a los estados visibles, nunca a la regla base. */ .mtk-home-hero .item.active, .mtk-home-hero .item.next, .mtk-home-hero .item.prev { display: flex; align-items: center; justify-content: center; } .mtk-home-hero .item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,17,.32), rgba(18,18,17,.62)), radial-gradient(circle at 15% 25%, rgba(255,128,0,.16), transparent 45%), radial-gradient(circle at 85% 75%, rgba(12,107,98,.20), transparent 45%); pointer-events: none; } .mtk-home-hero .mtk-wrap { position: relative; max-width: 780px; } .mtk-home-hero .mtk-eyebrow { color: var(--mtk-orange); display: inline-flex; align-items: center; gap: 8px; } .mtk-home-hero h1 { font-family: var(--mtk-font-display); font-size: clamp(28.8px, 4vw, 44.8px); font-weight: 700; margin: 14px 0 16px; text-wrap: balance; color: #fff; } .mtk-home-hero p { font-size: 16px; color: #C7C9C0; max-width: 62ch; margin: 0 auto; } .mtk-home-hero .mtk-btn-create { display: inline-block; margin-top: 26px; padding: 14px 30px; font-size: 14.72px; } /* Controles del carrusel (flechas + indicadores) */ .mtk-home-hero .carousel-control { position: absolute; top: 0; bottom: 0; width: 64px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); background: none; opacity: 1; text-shadow: none; z-index: 2; transition: color .15s ease; } .mtk-home-hero .carousel-control:hover, .mtk-home-hero .carousel-control:focus { color: #fff; } .mtk-home-hero .carousel-control.left { left: 0; } .mtk-home-hero .carousel-control.right { right: 0; } .mtk-home-hero .carousel-control svg { width: 28px; height: 28px; } @media (max-width: 700px) { .mtk-home-hero .carousel-control { width: 40px; } } .mtk-home-hero .carousel-indicators { position: absolute; bottom: 20px; z-index: 2; display: flex; gap: 8px; justify-content: center; width: auto; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; } .mtk-home-hero .carousel-indicators li { width: 8px; height: 8px; margin: 0; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; } .mtk-home-hero .carousel-indicators li.active { background: var(--mtk-orange); width: 22px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .mtk-home-hero .carousel-inner > .item { transition: none !important; } } .mtk-home-search { background: var(--mtk-surface-2); padding: 22px 0; border-bottom: 1px solid var(--mtk-line); } .mtk-home-search form { display: flex; gap: 10px; max-width: 900px; margin: 0 auto; } .mtk-home-search .mtk-input-pill { flex: 1; background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: 999px; padding: 15px 24px; font-size: 14.72px; color: var(--mtk-ink); font-family: var(--mtk-font-body); } .mtk-home-search .mtk-input-pill:focus { outline: none; border-color: var(--mtk-orange); } .mtk-home-search button, .mtk-home-search .mtk-home-search-btn { background: var(--mtk-orange); color: #fff; border: none; border-radius: 999px; padding: 15px 32px; font-weight: 700; font-size: 14.72px; font-family: var(--mtk-font-body); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; flex-shrink: 0; line-height: 1; } .mtk-home-search button:hover, .mtk-home-search .mtk-home-search-btn:hover { background: var(--mtk-orange-hover); } @media (max-width: 640px) { .mtk-home-search form { flex-direction: column; } .mtk-home-search .mtk-home-search-btn { width: 100%; } } .mtk-home-section { padding-top: 52px; padding-bottom: 52px; } .mtk-home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .mtk-home-section-head h2 { font-family: var(--mtk-font-display); font-size: 25.6px; font-weight: 700; margin: 0; color: var(--mtk-ink); } .mtk-home .owl-nav { display: flex; gap: 8px; } .mtk-home .owl-nav button.owl-prev, .mtk-home .owl-nav button.owl-next { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mtk-line); background: var(--mtk-surface); color: var(--mtk-ink-soft); font-size: 18px; display: flex; align-items: center; justify-content: center; } .mtk-home .owl-nav button:hover { border-color: var(--mtk-orange); color: var(--mtk-orange-hover); } .mtk-home .owl-carousel .owl-stage { display: flex; } .mtk-home .owl-carousel .owl-item { padding: 4px; height: auto; display: flex; } .mtk-home .owl-carousel .owl-item .event-item.mtk-card { width: 100%; } .mtk-home-cta { background: var(--mtk-ink); color: #fff; padding: 64px 0; text-align: center; } .mtk-home-cta h2 { font-family: var(--mtk-font-display); font-size: 28.8px; margin: 0 0 10px; color: #fff; } .mtk-home-cta p { color: #C7C9C0; font-size: 15.36px; margin: 0 auto 22px; max-width: 60ch; } .mtk-home-faq { padding: 60px 0 70px; } .mtk-home-faq h2 { font-family: var(--mtk-font-display); font-size: 25.6px; text-align: center; margin: 0 0 30px; color: var(--mtk-ink); } .mtk-home-faq-list { max-width: 820px; margin: 0 auto; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .mtk-home-faq-list li { list-style: none; } .mtk-home-faq-list .uk-accordion-title { display: block; background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); padding: 16px 20px; font-weight: 700; color: var(--mtk-ink); font-size: 14.72px; } .mtk-home-faq-list .uk-accordion-title:hover { border-color: var(--mtk-orange); color: var(--mtk-orange-hover); } .mtk-home-faq-list .uk-accordion-content { padding: 16px 20px 4px; color: var(--mtk-muted); font-size: 13.76px; line-height: 1.6; } /* ========================================================================== AUTENTICACIÓN (login, recuperar contraseña, registro) Reaprovecha el grid de Bootstrap (row/col-*) ya cargado, solo se retoca el acabado visual: tipografía, inputs, botones, checkbox, tarjeta. ========================================================================== */ .mtk-auth { background: var(--mtk-bg); padding: 54px 0 74px; font-family: var(--mtk-font-body); } .mtk-auth-head { text-align: center; margin-bottom: 26px; } .mtk-auth-head .mtk-eyebrow { color: var(--mtk-orange); display: block; margin-bottom: 6px; } .mtk-auth-head h1, .mtk-auth-head h2 { font-family: var(--mtk-font-display); font-size: 28.8px; font-weight: 700; color: var(--mtk-ink); margin: 0; } .mtk-auth-card { background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); box-shadow: var(--mtk-shadow); padding: 34px 36px 30px; } @media (max-width: 560px) { .mtk-auth-card { padding: 26px 20px 24px; } } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) p { color: var(--mtk-muted); font-size: 13.76px; line-height: 1.6; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .form-group label { font-size: 12.16px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--mtk-ink-soft); margin-bottom: 6px; } /* :not(.bootstrap-select) es necesario porque bootstrap-select.min.css copia la clase "form-control" del nativo (no mejorado con bootstrap-select) conserva el "chrome" propio del navegador si no se anula con appearance:none, lo que se ve como una caja dentro de otra caja. Lo sustituimos por una flecha propia, igual que en el buscador. */ :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) select.form-control { -webkit-appearance: none; appearance: none; line-height: 1.4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23767670' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) select.form-control::-ms-expand { display: none; } /* Selects mejorados con bootstrap-select (la inmensa mayoría en la extranet): dejamos el div ".bootstrap-select.form-control" sin caja propia (tal y como asume la librería) y pintamos el borde/relleno limpio directamente en el botón visible, con la misma altura que el resto de inputs para que quede centrado con ellos. */ :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .bootstrap-select.form-control { border: none; padding: 0; background: none; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .bootstrap-select .dropdown-toggle { border: 1px solid var(--mtk-line) !important; border-radius: var(--mtk-radius-s) !important; box-shadow: none !important; padding: 11px 30px 11px 14px !important; font-size: 14.72px !important; line-height: 1.4 !important; color: var(--mtk-ink) !important; background-color: var(--mtk-surface) !important; background-image: none !important; text-shadow: none !important; height: auto !important; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .bootstrap-select .dropdown-toggle:hover, :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .bootstrap-select .dropdown-toggle:focus, :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .bootstrap-select.open .dropdown-toggle { border-color: var(--mtk-orange) !important; background-color: var(--mtk-surface) !important; color: var(--mtk-ink) !important; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .bootstrap-select .dropdown-toggle .filter-option { color: inherit; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .bootstrap-select .dropdown-toggle .caret { border-top-color: var(--mtk-muted); right: 14px; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .form-control:focus { border-color: var(--mtk-orange); box-shadow: none; outline: none; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .input-group-addon { background: var(--mtk-surface-2); border: 1px solid var(--mtk-line); border-right: none; color: var(--mtk-muted); } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .input-group .form-control { border-radius: 0 var(--mtk-radius-s) var(--mtk-radius-s) 0; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) #msgEmail, :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) #msgPassword { font-size: 12.16px; margin-top: 6px; font-weight: 600; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .checkbox label { font-size: 12.8px; color: var(--mtk-muted); font-weight: 400; text-transform: none; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .checkbox a { color: var(--mtk-orange-hover); font-weight: 600; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon { color: var(--mtk-orange); } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) input[type="submit"], :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) button[type="submit"] { background: var(--mtk-orange) !important; border: none !important; border-radius: var(--mtk-radius-s) !important; font-weight: 700 !important; padding: 13px !important; font-size: 14.72px !important; box-shadow: none !important; text-shadow: none !important; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) input[type="submit"]:hover, :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) button[type="submit"]:hover { background: var(--mtk-orange-hover) !important; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) input[type="submit"]:disabled, :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) button[type="submit"]:disabled { background: var(--mtk-line) !important; color: var(--mtk-muted) !important; cursor: not-allowed; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .form-group.text-center label, :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .form-group.text-center a { text-transform: none; font-weight: 400; font-size: 13.44px; color: var(--mtk-muted); } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .form-group.text-center a { color: var(--mtk-orange-hover); font-weight: 600; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .form-group.text-center label { display: block; margin-top: 6px; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) #buttonRegister { color: var(--mtk-orange-hover); font-weight: 600; cursor: pointer; } :is(.mtk-auth-card, .mtk-extranet-content, .mtk-org-content) .alert { border-radius: var(--mtk-radius-s); font-size: 13.44px; } /* ========================================================================== DETALLE DE EVENTO + COMPRA DE ENTRADAS (Event/detail.html.twig y el fragmento AJAX detail-bookingTickets.html.twig) ========================================================================== */ .mtk-event { font-family: var(--mtk-font-body); background: var(--mtk-bg); } /* -------- cabecera con imagen -------- */ .mtk-event-hero { position: relative; background-size: cover; background-position: center; padding: 90px 0 40px; color: #fff; } .mtk-event-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.35), rgba(20,20,20,.78)); } .mtk-event-hero .mtk-wrap { position: relative; text-align: center; } .mtk-event-hero h1 { font-family: var(--mtk-font-display); font-size: clamp(25.6px, 3.6vw, 38.4px); font-weight: 700; color: #fff; margin: 0 0 16px; text-wrap: balance; } .mtk-event-hero .btn-share { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: 9px 20px; font-size: 12.8px; font-weight: 600; } .mtk-event-hero .btn-share:hover { background: rgba(255,255,255,.22); } /* -------- barra de info + CTA -------- */ .mtk-event-infobar { background: var(--mtk-surface); border-bottom: 1px solid var(--mtk-line); padding: 16px 0; } .mtk-event-infobar .mtk-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .mtk-event-infobar .mtk-info-lines { font-size: 13.44px; color: var(--mtk-ink-soft); line-height: 1.7; } .mtk-event-infobar .mtk-info-lines svg { flex: none; opacity: .7; margin-right: 4px; } .mtk-event-infobar .mtk-info-lines a { color: var(--mtk-ink-soft); text-decoration: underline; } .mtk-event-infobar .mtk-info-lines a:hover { color: var(--mtk-orange-hover); } .mtk-event-infobar #buttonBookingDown { background: var(--mtk-orange); color: #fff; border: none; border-radius: var(--mtk-radius-s); padding: 13px 26px; font-weight: 700; font-size: 13.76px; white-space: nowrap; display: inline-block; } .mtk-event-infobar #buttonBookingDown:hover { background: var(--mtk-orange-hover); color: #fff; } /* -------- avisos de estado -------- */ .mtk-event-notice { margin: 22px 0; border-radius: var(--mtk-radius-m); padding: 26px; text-align: center; } .mtk-event-notice.mtk-danger { background: var(--mtk-danger-soft, #FBE7E4); border: 1px solid var(--mtk-danger); } .mtk-event-notice.mtk-warn { background: #FFF6E5; border: 1px solid #E8B23D; } .mtk-event-notice .mtk-notice-icon { font-size: 40px; margin-bottom: 8px; } .mtk-event-notice.mtk-danger .mtk-notice-icon, .mtk-event-notice.mtk-danger strong { color: var(--mtk-danger); } .mtk-event-notice.mtk-warn .mtk-notice-icon, .mtk-event-notice.mtk-warn strong { color: #A8721D; } .mtk-event-notice strong { display: block; font-size: 17.28px; margin-bottom: 4px; font-family: var(--mtk-font-display); } .mtk-event-notice span { font-size: 13.76px; color: var(--mtk-ink-soft); } /* -------- Descripción desplegable por tipo de entrada (formulario de reserva) -------- */ .mtk-tickettype-desc { margin-top: 6px; } .mtk-tickettype-desc-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; font-size: 12.32px; font-weight: 600; color: var(--mtk-orange); cursor: pointer; } .mtk-tickettype-desc-toggle:hover { color: var(--mtk-orange-hover); text-decoration: underline; } .mtk-tickettype-desc-toggle svg { flex: none; transition: transform .18s ease; } .mtk-tickettype-desc-toggle.is-open svg { transform: rotate(180deg); } /* Mismo gris apagado que usaba ".text-muted" en la plantilla antigua (style.css), para que el texto se vea igual de claro que antes al desplegarlo. */ .mtk-tickettype-desc-text { margin-top: 8px; font-size: 12px; color: #b8b8b8; line-height: 1.6; } .mtk-event-lastcall { margin: 22px 0; background: var(--mtk-orange-soft); border: 1px solid var(--mtk-orange); border-radius: var(--mtk-radius-m); padding: 16px 20px; display: flex; align-items: center; gap: 14px; } .mtk-event-lastcall svg { flex: none; color: var(--mtk-orange-hover); } .mtk-event-lastcall strong { display: block; color: var(--mtk-orange-hover); font-size: 14.72px; } .mtk-event-lastcall span { font-size: 13.44px; color: var(--mtk-ink-soft); } /* -------- contenido principal -------- */ .mtk-event-body { padding-top: 40px; padding-bottom: 40px; } .mtk-event-body h3 { font-family: var(--mtk-font-display); font-size: 20.8px; font-weight: 700; color: var(--mtk-ink); margin: 0 0 16px; } .mtk-event-description { color: var(--mtk-ink-soft); font-size: 14.72px; line-height: 1.7; } .mtk-event-access { background: var(--mtk-surface-2); border-radius: var(--mtk-radius-m); padding: 22px 24px; margin: 26px 0; } .mtk-event-access h4 { font-family: var(--mtk-font-display); font-size: 15.36px; color: var(--mtk-ink); margin: 0 0 8px; font-weight: 700; } .mtk-event-access p, .mtk-event-access h5 { color: var(--mtk-muted); font-size: 13.44px; font-weight: 400; margin: 0; line-height: 1.6; } .mtk-event-organizer { font-size: 13.44px; color: var(--mtk-muted); margin: 20px 0; } .mtk-event-organizer .mtk-eyebrow { display: block; margin-bottom: 4px; color: var(--mtk-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 11.52px; } .mtk-event-organizer a { color: var(--mtk-ink); } .mtk-event-organizer strong { font-family: var(--mtk-font-display); font-size: 16.64px; } .mtk-event-video { border-radius: var(--mtk-radius-m); overflow: hidden; margin-top: 26px; box-shadow: var(--mtk-shadow); } /* -------- póster + tarjeta recinto/sala -------- */ .mtk-event-poster { border-radius: var(--mtk-radius-m); overflow: hidden; box-shadow: var(--mtk-shadow); margin-bottom: 30px; } .mtk-event-poster img { width: 100%; display: block; } .mtk-event-place-card { margin-bottom: 30px; } .mtk-event-place-card .mtk-side-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .mtk-event-place-card .mtk-side-head h4 { font-family: var(--mtk-font-display); font-size: 15.36px; color: var(--mtk-ink); margin: 0; font-weight: 700; } .mtk-event-place-card .owl-nav { display: flex; gap: 6px; } .mtk-event-place-card .owl-nav button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--mtk-line); background: var(--mtk-surface); color: var(--mtk-ink-soft); display: flex; align-items: center; justify-content: center; } .mtk-event-place-card .owl-nav button:hover { border-color: var(--mtk-orange); color: var(--mtk-orange-hover); } .mtk-place-tile { background: var(--mtk-surface); border-radius: var(--mtk-radius-m); overflow: hidden; box-shadow: var(--mtk-shadow); } .mtk-place-tile .mtk-place-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mtk-surface-2); } .mtk-place-tile .mtk-place-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mtk-place-tile .mtk-place-fav { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.92); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--mtk-danger); font-size: 15px; cursor: pointer; } .mtk-place-tile .mtk-place-followers { position: absolute; bottom: 10px; left: 10px; background: rgba(35,35,35,.75); color: #fff; font-size: 10.88px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .mtk-place-tile .mtk-place-foot { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mtk-place-tile .mtk-place-foot h5 { font-family: var(--mtk-font-display); font-size: 14.72px; margin: 0; font-weight: 700; } .mtk-place-tile .mtk-place-foot a { color: var(--mtk-ink); } .mtk-place-tile .btn-follow-place, .mtk-place-tile .btn-unfollow-place, .mtk-place-tile .btn-follow-login, .mtk-place-tile .btn-follow, .mtk-place-tile .btn-unfollow { border: 1px solid var(--mtk-line); background: var(--mtk-surface); color: var(--mtk-ink-soft); border-radius: var(--mtk-radius-s); padding: 7px 12px; font-size: 11.84px; font-weight: 700; white-space: nowrap; } .mtk-place-tile .btn-unfollow-place, .mtk-place-tile .btn-unfollow { border-color: var(--mtk-orange); color: var(--mtk-orange-hover); } .mtk-place-tile .btn-follow-place:hover, .mtk-place-tile .btn-follow-login:hover, .mtk-place-tile .btn-follow:hover { border-color: var(--mtk-orange); color: var(--mtk-orange-hover); } /* -------- selector de sesión -------- */ .mtk-event-sessions { padding-top: 10px; padding-bottom: 50px; } .mtk-event-sessions h3 { text-align: left; } .mtk-event-sessions .alert-info-rw { background: var(--mtk-surface-2); border: 1px dashed var(--mtk-line); border-radius: var(--mtk-radius-m); color: var(--mtk-muted); padding: 20px; text-align: center; font-size: 13.76px; } .mtk-session-date-label { font-family: var(--mtk-font-display); font-weight: 700; font-size: 15.36px; color: var(--mtk-ink); text-align: center; padding-top: 8px; } .mtk-session-slot { background: var(--mtk-surface) !important; border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); padding: 14px 18px; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: border-color .15s ease, box-shadow .15s ease; } .mtk-session-slot:hover { border-color: var(--mtk-orange); box-shadow: var(--mtk-shadow); } .mtk-session-slot .mtk-slot-time { font-size: 20.8px; color: var(--mtk-ink); display: flex; align-items: center; gap: 8px; } .mtk-session-slot .mtk-slot-time svg { color: var(--mtk-orange-hover); } .mtk-session-slot .label-danger { background: var(--mtk-danger); border-radius: 999px; padding: 4px 10px; font-weight: 700; } .mtk-session-slot .text-success { color: var(--mtk-teal) !important; } .mtk-session-slot .text-danger { color: var(--mtk-danger) !important; } /* -------- formulario de tipos de entrada (AJAX) -------- */ .show-ticket-item { background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); padding: 20px !important; margin: 0 0 16px !important; } .show-ticket-item .fa-ticket { color: var(--mtk-orange) !important; } .show-ticket-item .label-success { background: var(--mtk-teal); border-radius: 999px; padding: 5px 10px; } .mtk-event-sessions .alert-success { background: var(--mtk-teal); color: #fff; border: none; border-radius: var(--mtk-radius-s); font-weight: 600; font-size: 13.44px; } .mtk-event-sessions .alert-info { background: var(--mtk-surface-2); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-s); color: var(--mtk-ink-soft); font-size: 13.44px; } #msgPriceTotal { color: var(--mtk-ink); font-family: var(--mtk-font-display); display: inline; } .mtk-event-sessions input[type="submit"], .mtk-event-sessions button[type="submit"] { background: var(--mtk-orange) !important; border: none !important; border-radius: var(--mtk-radius-s) !important; font-weight: 700 !important; box-shadow: none !important; } .mtk-event-sessions input[type="submit"]:hover, .mtk-event-sessions button[type="submit"]:hover { background: var(--mtk-orange-hover) !important; } /* -------- botón flotante móvil -------- */ .divFlotantePadre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--mtk-surface); border-top: 1px solid var(--mtk-line); box-shadow: 0 -6px 18px rgba(20,20,20,.1); padding: 12px 16px; } .divFlotantePadre #buttonBookingDownFooter { background: var(--mtk-orange) !important; border: none !important; border-radius: var(--mtk-radius-s) !important; font-weight: 700 !important; } /* Con entradas seleccionadas mostramos el total junto al botón, en una misma fila */ .mtk-mobile-booking-bar-inner { display: flex; align-items: center; gap: 14px; } .mtk-mobile-booking-total { flex: none; line-height: 1.25; } .mtk-mobile-booking-total span { display: block; font-size: 11.2px; color: var(--mtk-ink-soft); text-transform: uppercase; letter-spacing: .04em; } .mtk-mobile-booking-total strong { font-size: 19.2px; color: var(--mtk-ink); font-family: var(--mtk-font-display); white-space: nowrap; } .mtk-mobile-booking-btn-wrap { flex: 1 1 auto; min-width: 0; } /* -------- modal compartir -------- */ .mtk-event .modal-content { border-radius: var(--mtk-radius-m); border: none; } .mtk-event .modal-title { font-family: var(--mtk-font-display); font-weight: 700; } /* ========================================================================== LISTADO DE RECINTOS (Place/list.html.twig) Reaprovecha el shell de .mtk-search (page-intro/finder/results-bar) y el componente de tarjeta compartido (.mtk-places ya está en el :is() de arriba). ========================================================================== */ .mtk-search .box-place.mtk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } @media (max-width: 1360px) { .mtk-search .box-place.mtk-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 980px) { .mtk-search .box-place.mtk-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .mtk-search .box-place.mtk-grid { grid-template-columns: 1fr; } } .mtk-places .place-item.mtk-card .mtk-card-body h2 { font-size: 15.36px; } .mtk-places .mtk-place-followers-badge { align-self: flex-start; background: var(--mtk-surface-2); color: var(--mtk-ink-soft); font-size: 11.2px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .mtk-places .mtk-card-actions { display: flex; flex-wrap: wrap; gap: 6px; } .mtk-places .mtk-card-actions button { border: 1px solid var(--mtk-line); background: var(--mtk-surface); color: var(--mtk-ink-soft); border-radius: var(--mtk-radius-s); padding: 6px 10px; font-size: 11.2px; font-weight: 600; } .mtk-places .mtk-card-actions button:hover { border-color: var(--mtk-orange); color: var(--mtk-orange-hover); } .mtk-places .mtk-card-actions .btn-favorite-place-remove, .mtk-places .mtk-card-actions .btn-unfollow-place { border-color: var(--mtk-orange); color: var(--mtk-orange-hover); } .mtk-places .mtk-card-foot { flex-direction: column; align-items: stretch; gap: 10px; } .mtk-places .mtk-buy-btn { text-align: center; } /* ========================================================================== PERFILES PÚBLICOS (Place/detail, Promoter/detail, Viewer/detail) ========================================================================== */ .mtk-profile-hero { position: relative; background-size: cover; background-position: center; padding: 80px 0 34px; color: #fff; text-align: center; } .mtk-profile-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.35), rgba(20,20,20,.78)); } .mtk-profile-hero .mtk-wrap { position: relative; } .mtk-profile-hero h1 { font-family: var(--mtk-font-display); font-size: clamp(24px, 3.4vw, 33.6px); font-weight: 700; color: #fff; margin: 0 0 6px; } .mtk-profile-hero .mtk-followers { color: #E8E9E3; font-size: 13.44px; margin-bottom: 18px; } .mtk-profile-hero .mtk-followers strong { font-size: 17.28px; color: #fff; } .mtk-profile-hero .mtk-card-actions { justify-content: center; display: flex; flex-wrap: wrap; gap: 8px; } .mtk-profile-hero .mtk-card-actions button { border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1); color: #fff; border-radius: 999px; padding: 9px 18px; font-size: 12.16px; font-weight: 700; } .mtk-profile-hero .mtk-card-actions button:hover { background: rgba(255,255,255,.22); } .mtk-profile-hero .mtk-card-actions .btn-favorite-place-remove, .mtk-profile-hero .mtk-card-actions .btn-unfollow-place, .mtk-profile-hero .mtk-card-actions .btn-favorite-remove, .mtk-profile-hero .mtk-card-actions .btn-unfollow { background: var(--mtk-orange); border-color: var(--mtk-orange); } .mtk-profile-bar { background: var(--mtk-surface); border-bottom: 1px solid var(--mtk-line); padding: 16px 0; } .mtk-profile-bar .mtk-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .mtk-profile-bar .mtk-info-lines { font-size: 13.44px; color: var(--mtk-ink-soft); } .mtk-profile-bar .mtk-info-lines a { color: var(--mtk-ink-soft); text-decoration: underline; } .mtk-profile-bar .mtk-info-lines a:hover { color: var(--mtk-orange-hover); } .mtk-profile-bar .mtk-social { display: flex; align-items: center; gap: 8px; font-size: 12.16px; color: var(--mtk-muted); font-weight: 700; } .mtk-profile-bar .mtk-social a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--mtk-line); display: flex; align-items: center; justify-content: center; color: var(--mtk-ink-soft); } .mtk-profile-bar .mtk-social a:hover { border-color: var(--mtk-orange); color: var(--mtk-orange-hover); } .mtk-profile-events { padding-top: 40px; padding-bottom: 60px; } .mtk-profile-events h3 { font-family: var(--mtk-font-display); font-size: 19.2px; font-weight: 700; color: var(--mtk-ink); margin: 0 0 20px; } .mtk-profile .box-event.mtk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } @media (max-width: 1360px) { .mtk-profile .box-event.mtk-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 980px) { .mtk-profile .box-event.mtk-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .mtk-profile .box-event.mtk-grid { grid-template-columns: 1fr; } } /* ========================================================================== CENTRO DE AYUDA (Pages/help, helpCategory, helpArticle) ========================================================================== */ .mtk-help-hero { background: var(--mtk-ink); color: #fff; padding: 60px 0 44px; text-align: center; } .mtk-help-hero h1 { font-family: var(--mtk-font-display); font-size: clamp(22.4px, 3vw, 30.4px); font-weight: 700; color: #fff; margin: 0 0 22px; } .mtk-help-hero form { max-width: 620px; margin: 0 auto; position: relative; } .mtk-help-hero .mtk-help-search-input { width: 100%; background: var(--mtk-surface); border: none; border-radius: 999px; padding: 15px 24px 15px 46px; font-size: 14.72px; color: var(--mtk-ink); font-family: var(--mtk-font-body); } .mtk-help-hero .mtk-help-search-input:focus { outline: 2px solid var(--mtk-orange); } .mtk-help-hero form svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--mtk-muted); } .mtk-help-body { padding: 44px 0; } .mtk-help-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto 44px; } @media (max-width: 640px) { .mtk-help-cats { grid-template-columns: 1fr; } } .mtk-help-cat-card { position: relative; background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); padding: 24px; display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--mtk-shadow); } .mtk-help-cat-card:hover { box-shadow: var(--mtk-shadow-hover); border-color: var(--mtk-orange); } .mtk-help-cat-card .mtk-help-cat-icon { color: var(--mtk-orange); flex: none; } .mtk-help-cat-card h3 { font-family: var(--mtk-font-display); font-size: 16.64px; font-weight: 700; margin: 0 0 4px; color: var(--mtk-ink); } .mtk-help-cat-card p { color: var(--mtk-muted); font-size: 13.44px; margin: 0; } .mtk-help-cat-card a.mtk-cover-link { position: absolute; inset: 0; border-radius: inherit; } .mtk-breadcrumb { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.8px; color: var(--mtk-muted); max-width: 900px; margin: 0 auto 20px; } .mtk-breadcrumb a { color: var(--mtk-muted); text-decoration: underline; } .mtk-breadcrumb a:hover { color: var(--mtk-orange-hover); } .mtk-breadcrumb span:last-child { color: var(--mtk-ink); font-weight: 600; } .mtk-help-title { display: flex; gap: 16px; align-items: flex-start; max-width: 900px; margin: 0 auto 30px; } .mtk-help-title .mtk-help-cat-icon { color: var(--mtk-orange); } .mtk-help-title h1 { font-family: var(--mtk-font-display); font-size: 25.6px; font-weight: 700; color: var(--mtk-ink); margin: 0; } .mtk-help-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .article-item.mtk-help-item { position: relative; background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); padding: 18px 22px; box-shadow: var(--mtk-shadow); } .article-item.mtk-help-item:hover { border-color: var(--mtk-orange); box-shadow: var(--mtk-shadow-hover); } .article-item.mtk-help-item h3 { font-family: var(--mtk-font-display); font-size: 15.36px; font-weight: 700; margin: 0 0 4px; color: var(--mtk-ink); } .article-item.mtk-help-item p { color: var(--mtk-muted); font-size: 13.44px; margin: 0; } .article-item.mtk-help-item p a { color: var(--mtk-orange-hover); font-weight: 600; position: relative; z-index: 1; } .article-item.mtk-help-item a.mtk-cover-link { position: absolute; inset: 0; border-radius: inherit; } .mtk-help-article { max-width: 780px; margin: 0 auto; background: var(--mtk-surface); border-radius: var(--mtk-radius-m); box-shadow: var(--mtk-shadow); padding: 40px; } @media (max-width: 640px) { .mtk-help-article { padding: 26px 20px; } } .mtk-help-article h1 { font-family: var(--mtk-font-display); font-size: 24px; font-weight: 700; color: var(--mtk-ink); margin: 0 0 18px; } .mtk-help-article .mtk-article-content { color: var(--mtk-ink-soft); font-size: 14.72px; line-height: 1.75; } .mtk-help-article .mtk-article-content p { margin: 0 0 14px; } .mtk-help-article .mtk-article-content a { color: var(--mtk-orange-hover); } .mtk-help-article .mtk-article-content strong, .mtk-help-article .mtk-article-content b { color: var(--mtk-ink); } .mtk-help-article .mtk-article-content h2, .mtk-help-article .mtk-article-content h3, .mtk-help-article .mtk-article-content h4, .mtk-help-article .mtk-article-content h5 { font-family: var(--mtk-font-display); color: var(--mtk-ink); font-weight: 700; margin: 26px 0 10px; } .mtk-help-article .mtk-article-content > h2:first-child, .mtk-help-article .mtk-article-content > h3:first-child, .mtk-help-article .mtk-article-content > h4:first-child, .mtk-help-article .mtk-article-content > h5:first-child { margin-top: 0; } /* ========================================================================== ¿CÓMO VENDER ENTRADAS? (templates/static/frontend/how-to-sell-tickets.html.twig) ========================================================================== */ .mtk-sell-hero { position: relative; background-size: cover; background-position: center; padding: 90px 0; color: #fff; text-align: center; } .mtk-sell-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.55), rgba(20,20,20,.82)); } .mtk-sell-hero .mtk-wrap { position: relative; max-width: 760px; } .mtk-sell-hero h1 { font-family: var(--mtk-font-display); font-size: clamp(27.2px, 3.8vw, 40px); font-weight: 700; color: #fff; margin: 0 0 16px; } .mtk-sell-hero p { color: #D7D8D2; font-size: 15.36px; max-width: 60ch; margin: 0 auto; } .mtk-sell-hero .mtk-btn-create { display: inline-block; margin-top: 24px; } .mtk-sell-section { padding: 56px 0; background: var(--mtk-surface); } .mtk-sell-section h2 { font-family: var(--mtk-font-display); font-size: 25.6px; font-weight: 700; color: var(--mtk-ink); text-align: center; margin: 0 0 10px; } .mtk-sell-section .mtk-lead { text-align: center; color: var(--mtk-muted); font-size: 14.72px; max-width: 60ch; margin: 0 auto 36px; } /* Contraste claro entre secciones (blanco vs. gris perceptible), como en la plantilla original (background-white alternado con #f1f1f1). */ .mtk-sell-section.mtk-alt { background: #EEEFE8; } .mtk-sell-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; } @media (max-width: 860px) { .mtk-sell-steps { grid-template-columns: 1fr; gap: 34px; } } .mtk-sell-steps img { width: 68px; height: 68px; margin: 0 auto 16px; display: block; } .mtk-sell-steps h3 { font-family: var(--mtk-font-display); font-size: 17.28px; font-weight: 700; color: var(--mtk-ink); margin: 0 0 8px; } .mtk-sell-steps p { color: var(--mtk-muted); font-size: 13.76px; line-height: 1.6; } .mtk-sell-feature { display: flex; align-items: center; gap: 50px; } @media (max-width: 860px) { .mtk-sell-feature { flex-direction: column; } } .mtk-sell-feature .mtk-sell-feature-text { flex: 1; } .mtk-sell-feature .mtk-sell-feature-text p { color: var(--mtk-ink-soft); font-size: 14.72px; line-height: 1.7; margin: 0 0 14px; } .mtk-sell-feature img { flex: none; width: 44%; max-width: 380px; border-radius: var(--mtk-radius-m); } @media (max-width: 860px) { .mtk-sell-feature img { width: 100%; max-width: 320px; } } .mtk-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px; max-width: 980px; margin: 0 auto; } @media (max-width: 700px) { .mtk-benefits { grid-template-columns: 1fr; } } .mtk-benefit { display: flex; gap: 16px; align-items: flex-start; } .mtk-benefit img { width: 46px; height: 46px; flex: none; } .mtk-benefit h4 { font-family: var(--mtk-font-display); font-size: 15.36px; font-weight: 700; color: var(--mtk-ink); margin: 0 0 4px; } .mtk-benefit p { color: var(--mtk-muted); font-size: 13.44px; line-height: 1.6; margin: 0; } .mtk-sell-banner { position: relative; background-size: cover; background-position: center; background-color: var(--mtk-ink); padding: 56px 0; color: #fff; } .mtk-sell-banner::before { content: ""; position: absolute; inset: 0; background: rgba(20,20,20,.6); } .mtk-sell-banner .mtk-wrap { position: relative; display: flex; align-items: center; gap: 40px; } @media (max-width: 860px) { .mtk-sell-banner .mtk-wrap { flex-direction: column; text-align: center; } } .mtk-sell-banner img { flex: none; width: 220px; } .mtk-sell-banner h3 { font-family: var(--mtk-font-display); font-size: 21.76px; font-weight: 700; color: #fff; margin: 0 0 10px; } .mtk-sell-banner p { color: #D7D8D2; font-size: 14.4px; line-height: 1.6; margin: 0 0 16px; } .mtk-sell-contact { max-width: 900px; margin: 0 auto; } .mtk-sell-cta-light .mtk-lead { margin-bottom: 22px; } /* ========================================================================== EXTRANET DE USUARIO (extranetFrontend.html.twig + páginas Extranet/user* y Extranet/settings*). Reaprovecha el grid de Bootstrap para el contenido interno de cada panel (row/col-*, form-group) y las reglas de formulario ya definidas en :is(.mtk-auth-card, .mtk-extranet-content) más arriba. ========================================================================== */ /* La plantilla antigua define "section { overflow: hidden; }" (style.css) de forma global, ya que
hereda ese selector. Lo anulamos aquí para que nada recorte contenido de esta página (menús desplegables, sombras, etc.) por accidente. */ .mtk-extranet { background: var(--mtk-bg); padding: 34px 0 70px; font-family: var(--mtk-font-body); font-weight: 400; overflow: visible; } .mtk-extranet-alert { background: var(--mtk-orange-soft); border-bottom: 1px solid var(--mtk-line); color: var(--mtk-ink-soft); font-size: 13.44px; text-align: center; padding: 12px 20px; } .mtk-extranet-alert a { color: var(--mtk-orange-hover); font-weight: 700; } .mtk-extranet-shell { display: flex; align-items: flex-start; gap: 26px; } @media (max-width: 900px) { .mtk-extranet-shell { flex-direction: column; align-items: stretch; } } .mtk-extranet-sidebar { flex: none; width: 252px; display: flex; flex-direction: column; gap: 18px; } @media (max-width: 900px) { .mtk-extranet-sidebar { width: auto; } } .mtk-extranet-nav, .mtk-extranet-subnav { background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); box-shadow: var(--mtk-shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .mtk-extranet-nav-title { font-size: 11.52px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--mtk-muted); padding: 10px 12px 6px; } :is(.mtk-extranet-nav, .mtk-extranet-subnav) a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--mtk-radius-s); color: var(--mtk-ink-soft); font-weight: 600; font-size: 13.6px; text-decoration: none; line-height: 1.3; } :is(.mtk-extranet-nav, .mtk-extranet-subnav) a:hover { background: var(--mtk-surface-2); color: var(--mtk-ink); } :is(.mtk-extranet-nav, .mtk-extranet-subnav) a.is-active { background: var(--mtk-orange-soft); color: var(--mtk-orange-hover); } .mtk-extranet-nav a[class*="pe-7s-"]::before { font-size: 16.8px; flex: none; } .mtk-extranet-content { flex: 1; min-width: 0; background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); box-shadow: var(--mtk-shadow); padding: 30px 32px 34px; } @media (max-width: 560px) { .mtk-extranet-content { padding: 22px 18px 26px; } } .mtk-extranet-content-full { width: 100%; } .mtk-extranet-head { margin-bottom: 22px; } .mtk-extranet-head h1, .mtk-extranet-head h3 { font-family: var(--mtk-font-display); font-size: 22.4px; font-weight: 700; color: var(--mtk-ink); margin: 0; } /* Sub-pestañas Seguidores / Siguiendo (antes .tabs.tabs-style-iconbox) */ .mtk-extranet-tabbar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .mtk-extranet-tabbar a { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--mtk-surface-2); color: var(--mtk-ink-soft); font-weight: 600; font-size: 13.12px; text-decoration: none; } .mtk-extranet-tabbar a.is-active { background: var(--mtk-orange); color: #fff; } .mtk-extranet-tabbar a[class*="pe-7s-"]::before { font-size: 15px; } /* Formulario de filtro (buscar/rol) usado en favoritos, siguiendo y seguidores */ .mtk-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 8px; } .mtk-filter-row .form-group { margin: 0; flex: 1 1 200px; } .mtk-filter-row .form-group:last-child { flex: none; } .mtk-filter-row input[type="submit"], .mtk-filter-row button[type="submit"] { padding: 11px 24px !important; } /* Paneles internos (antes .panel.panel-default de Bootstrap), usados en ajustes de cuenta y notificaciones para agrupar cada bloque de formulario */ :is(.mtk-extranet-content, .mtk-org-content) .panel { border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); box-shadow: none; margin-bottom: 22px; } :is(.mtk-extranet-content, .mtk-org-content) .panel-heading { background: var(--mtk-surface-2); border-bottom: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m) var(--mtk-radius-m) 0 0; padding: 13px 20px; font-family: var(--mtk-font-display); font-size: 15.36px; color: var(--mtk-ink); } :is(.mtk-extranet-content, .mtk-org-content) .panel-body { padding: 20px; } :is(.mtk-extranet-content, .mtk-org-content) .panel .btn-primary, :is(.mtk-extranet-content, .mtk-org-content) .panel a.btn-primary { background: var(--mtk-orange); border: none; border-radius: var(--mtk-radius-s); font-weight: 700; box-shadow: none; text-shadow: none; } .mtk-extranet-content .panel .btn-primary:hover { background: var(--mtk-orange-hover); } /* Botones de la barra de acciones del organizador (p.ej. "Añadir sesión", "Añadir invitaciones"), que no viven dentro de un .panel ni de una .mtk-org-table, con los mismos tonos de marca que el resto de botones */ .mtk-org-content > .btn, .mtk-org-content > a > .btn { border-radius: var(--mtk-radius-s); font-weight: 700; box-shadow: none; text-shadow: none; border: none; margin: 0 8px 8px 0; } .mtk-org-content > .btn-primary, .mtk-org-content > a > .btn-primary { background: var(--mtk-orange); color: #fff; } .mtk-org-content > .btn-primary:hover, .mtk-org-content > a > .btn-primary:hover { background: var(--mtk-orange-hover); color: #fff; } .mtk-org-content > .btn-success, .mtk-org-content > a > .btn-success { background: var(--mtk-teal); color: #fff; } .mtk-org-content > .btn-success:hover, .mtk-org-content > a > .btn-success:hover { background: #0a544d; color: #fff; } /* Estado vacío reutilizando el patrón .mtk-empty ya usado en otras páginas, sustituyendo a .alert.alert-info.alert-info-rw dentro de la extranet */ .mtk-extranet-content .mtk-empty { margin: 4px 0; } /* Listado de entradas compradas (dashboard / eventos pasados) */ .mtk-ticket-list { display: flex; flex-direction: column; gap: 14px; } .mtk-ticket-item { display: flex; align-items: center; gap: 18px; padding: 14px; border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); } @media (max-width: 620px) { .mtk-ticket-item { flex-wrap: wrap; } } .mtk-ticket-item .mtk-ticket-thumb { flex: none; width: 84px; height: 84px; border-radius: var(--mtk-radius-s); overflow: hidden; background: var(--mtk-surface-2); } .mtk-ticket-item .mtk-ticket-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mtk-ticket-item .mtk-ticket-info { flex: 1; min-width: 0; } .mtk-ticket-item .mtk-ticket-info strong { display: block; font-size: 14.72px; color: var(--mtk-ink); margin-bottom: 4px; } .mtk-ticket-item .mtk-ticket-info p { margin: 0 0 2px; font-size: 12.8px; color: var(--mtk-muted); } .mtk-ticket-item .mtk-ticket-meta { font-size: 12.16px; color: var(--mtk-muted); line-height: 1.6; } .mtk-ticket-item .mtk-ticket-download { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--mtk-ink-soft); font-size: 11.84px; font-weight: 700; text-decoration: none; text-align: center; } .mtk-ticket-item .mtk-ticket-download:hover { color: var(--mtk-orange-hover); } .mtk-ticket-item .mtk-ticket-download i { font-size: 22px; } .mtk-extranet-more { text-align: center; margin-top: 18px; } .mtk-extranet-more a { color: var(--mtk-ink-soft); font-weight: 700; font-size: 13.12px; text-decoration: none; } .mtk-extranet-more a:hover { color: var(--mtk-orange-hover); } /* Grid de usuarios / recintos (favoritos, siguiendo, seguidores) */ .mtk-user-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .mtk-user-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .mtk-user-grid { grid-template-columns: 1fr; } } .mtk-user-card { position: relative; border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); overflow: hidden; background: var(--mtk-surface); transition: box-shadow .15s ease, transform .15s ease; } .mtk-user-card:hover { box-shadow: var(--mtk-shadow-hover); transform: translateY(-2px); } .mtk-user-card .mtk-user-card-media { position: relative; aspect-ratio: 4/3; background: var(--mtk-surface-2); } .mtk-user-card .mtk-user-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mtk-user-card .mtk-user-card-badge { position: absolute; top: 10px; right: 10px; background: rgba(35,35,35,.72); color: #fff; font-size: 11.2px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .mtk-user-card .mtk-user-card-fav { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.92); border-radius: 50%; color: var(--mtk-danger); font-size: 15px; cursor: pointer; } .mtk-user-card .mtk-user-card-body { padding: 14px 16px 16px; } .mtk-user-card .mtk-user-card-body h5 { margin: 0 0 10px; font-family: var(--mtk-font-display); font-size: 15.36px; font-weight: 700; color: var(--mtk-ink); } .mtk-user-card .mtk-user-card-body h5 a { color: inherit; text-decoration: none; } .mtk-user-card .mtk-user-card-actions { display: flex; } .mtk-user-card .mtk-user-card-actions .btn { border-radius: 999px; font-weight: 700; font-size: 12.16px; padding: 7px 16px; box-shadow: none; } .mtk-user-card .mtk-user-card-actions .btn-default { background: var(--mtk-surface-2); border: none; color: var(--mtk-ink-soft); } .mtk-user-card .mtk-user-card-actions .btn-success { background: var(--mtk-teal); border: none; color: #fff; } /* Centro de notificaciones */ .mtk-notification-list { display: flex; flex-direction: column; gap: 4px; } .mtk-notification-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--mtk-line); } .mtk-notification-item:last-child { border-bottom: none; } .mtk-notification-item .mtk-notification-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--mtk-surface-2); } .mtk-notification-item .mtk-notification-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .mtk-notification-item .mtk-notification-body { flex: 1; min-width: 0; } .mtk-notification-item .mtk-notification-time { display: block; font-size: 11.84px; color: var(--mtk-muted); margin-bottom: 4px; } .mtk-notification-item .mtk-notification-body p { margin: 0; font-size: 13.6px; color: var(--mtk-ink-soft); } .mtk-notification-item .mtk-notification-body p a { color: var(--mtk-ink); font-weight: 700; text-decoration: none; } .mtk-notification-item .mtk-notification-body p a:hover { color: var(--mtk-orange-hover); } /* Tabla del programa de afiliados, reaprovechada como componente genérico de tabla de datos (.mtk-org-table) para el listado de sesiones del organizador */ .mtk-affiliate-intro { color: var(--mtk-muted); font-size: 13.44px; line-height: 1.7; } :is(.mtk-affiliate-table-wrap, .mtk-org-table-wrap) { overflow-x: auto; } :is(.mtk-affiliate-table, .mtk-org-table) { width: 100%; border-collapse: collapse; font-size: 13.12px; } :is(.mtk-affiliate-table, .mtk-org-table) th { text-align: left; font-size: 11.2px; letter-spacing: .05em; text-transform: uppercase; color: var(--mtk-muted); padding: 10px 12px; border-bottom: 1px solid var(--mtk-line); white-space: nowrap; } :is(.mtk-affiliate-table, .mtk-org-table) td { padding: 12px; border-bottom: 1px solid var(--mtk-line); vertical-align: middle; } :is(.mtk-affiliate-table, .mtk-org-table) .label { border-radius: var(--mtk-radius-s); font-weight: 700; padding: 4px 10px; font-size: 11.52px; } :is(.mtk-affiliate-table, .mtk-org-table) .btn { border-radius: var(--mtk-radius-s); font-weight: 700; font-size: 12.16px; box-shadow: none; text-shadow: none; border: none; margin: 2px 3px 2px 0; } :is(.mtk-affiliate-table, .mtk-org-table) .btn-primary { background: var(--mtk-orange); color: #fff; } :is(.mtk-affiliate-table, .mtk-org-table) .btn-primary:hover { background: var(--mtk-orange-hover); } :is(.mtk-affiliate-table, .mtk-org-table) .btn-success { background: var(--mtk-teal); color: #fff; } :is(.mtk-affiliate-table, .mtk-org-table) .btn-success:hover { background: #0a544d; } :is(.mtk-affiliate-table, .mtk-org-table) .btn-default { background: var(--mtk-surface-2); color: var(--mtk-ink-soft); } :is(.mtk-affiliate-table, .mtk-org-table) .btn-default:hover { background: var(--mtk-line); color: var(--mtk-ink); } :is(.mtk-affiliate-table, .mtk-org-table) .btn-danger { background: var(--mtk-danger); color: #fff; } :is(.mtk-affiliate-table, .mtk-org-table) .btn-danger:hover { background: #A8281D; } /* ========================================================================== EXTRANET ORGANIZADOR (organizersMenuBase, organizersEvents*). La plantilla original usa un menú horizontal de pestañas subrayadas (tabs-style-underline), así que en vez de las píldoras de la extranet de usuario montamos un componente de pestañas con línea inferior naranja en la activa. ========================================================================== */ .mtk-org-nav-wrap { padding: 0; } .mtk-org-tabs { display: flex; gap: 30px; align-items: center; border-bottom: 1px solid var(--mtk-line); /* En vez de partirse en varias líneas (que descuadra la línea inferior), en pantallas estrechas el menú se desplaza en horizontal como una barra de pestañas de app, en una sola fila siempre. */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mtk-org-tabs::-webkit-scrollbar { display: none; } .mtk-org-tabs a { display: flex; align-items: center; gap: 7px; flex: none; padding: 13px 2px; margin-bottom: -1px; color: var(--mtk-muted); font-weight: 600; font-size: 13.76px; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; } .mtk-org-tabs a:hover { color: var(--mtk-ink); } .mtk-org-tabs a.is-active { color: var(--mtk-ink); border-bottom-color: var(--mtk-orange); } .mtk-org-tabs a[class*="pe-7s-"]::before { font-size: 15px; } .mtk-org-tabs.mtk-org-tabs-sm { gap: 22px; } .mtk-org-tabs.mtk-org-tabs-sm a { padding: 9px 2px; font-size: 12.48px; } .mtk-org-tabs.mtk-org-tabs-sm a[class*="pe-7s-"]::before { font-size: 13px; } @media (max-width: 600px) { .mtk-org-tabs { gap: 20px; } .mtk-org-tabs.mtk-org-tabs-sm { gap: 16px; } } .mtk-org-content { background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); box-shadow: var(--mtk-shadow); padding: 30px 32px 34px; margin: 22px 0 60px; } @media (max-width: 560px) { .mtk-org-content { padding: 22px 18px 26px; } } .mtk-org-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .mtk-org-head h1 { font-family: var(--mtk-font-display); font-size: 22.4px; font-weight: 700; color: var(--mtk-ink); margin: 0; } .mtk-org-head .mtk-btn-create { padding: 12px 22px; font-size: 13.44px; } .mtk-org-subnav-row { margin-bottom: 22px; } /* Alertas informativas/aviso reutilizando el tono de .mtk-extranet-alert (usada en organizersEventsAlerts.html.twig) */ .mtk-org-alert { background: var(--mtk-orange-soft); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); color: var(--mtk-ink-soft); font-size: 13.44px; padding: 14px 18px; margin-bottom: 16px; } .mtk-org-alert a { color: var(--mtk-orange-hover); font-weight: 700; } .mtk-org-alert.mtk-org-alert-warning { background: #FFF6E5; } /* Listado de eventos del organizador */ .mtk-org-event-list { display: flex; flex-direction: column; gap: 18px; } .mtk-org-event-item { display: flex; gap: 20px; padding: 18px; border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); } @media (max-width: 700px) { .mtk-org-event-item { flex-direction: column; } } .mtk-org-event-thumb { flex: none; width: 180px; height: 130px; border-radius: var(--mtk-radius-s); overflow: hidden; background: var(--mtk-surface-2); } .mtk-org-event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 700px) { .mtk-org-event-thumb { width: 100%; height: 160px; } } .mtk-org-event-body { flex: 1; min-width: 0; } .mtk-org-event-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .mtk-org-event-top h3 { font-family: var(--mtk-font-display); font-size: 17.6px; font-weight: 700; color: var(--mtk-ink); margin: 0; } .mtk-org-event-meta { color: var(--mtk-muted); font-size: 13.12px; line-height: 1.8; margin: 6px 0 14px; } .mtk-org-event-meta i { color: var(--mtk-orange); width: 16px; text-align: center; margin-right: 4px; } .mtk-org-event-actions { display: flex; gap: 10px; flex-wrap: wrap; } .mtk-org-event-actions .btn { border-radius: var(--mtk-radius-s); font-weight: 700; font-size: 13.12px; padding: 10px 18px; box-shadow: none; text-shadow: none; border: none; } .mtk-org-event-actions .btn-custom-orange, .mtk-org-event-actions .btn.btn-bordered.btn-custom-orange { background: var(--mtk-orange); color: #fff; } .mtk-org-event-actions .btn-custom-orange:hover { background: var(--mtk-orange-hover); color: #fff; } .mtk-org-event-actions .btn-instagram, .mtk-org-event-actions .btn.btn-bordered.btn-instagram { background: var(--mtk-surface-2); color: var(--mtk-ink-soft); } .mtk-org-event-actions .btn-instagram:hover { background: var(--mtk-line); color: var(--mtk-ink); } .mtk-org-event-actions .btn-danger { background: var(--mtk-danger); color: #fff; } /* Barra de progreso de ventas (Bootstrap .progress) */ .mtk-org-content .progress { background: var(--mtk-surface-2); border-radius: 999px; box-shadow: none; overflow: hidden; } .mtk-org-content .progress-bar { background-color: var(--mtk-orange); box-shadow: none; } .mtk-org-content .progress-head { font-size: 13.12px; color: var(--mtk-ink-soft); } /* Ficha de detalle de un evento (organizersEventsView.html.twig): foto grande + botones de acción en una columna, información + paneles en la otra */ .mtk-org-detail { display: flex; gap: 26px; } @media (max-width: 760px) { .mtk-org-detail { flex-direction: column; } } .mtk-org-detail-media { flex: none; width: 240px; display: flex; flex-direction: column; gap: 10px; } @media (max-width: 760px) { .mtk-org-detail-media { width: 100%; } } .mtk-org-detail-photo { border-radius: var(--mtk-radius-m); overflow: hidden; background: var(--mtk-surface-2); aspect-ratio: 4/3; } .mtk-org-detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .mtk-org-detail-media .btn { border-radius: var(--mtk-radius-s); font-weight: 700; font-size: 13.12px; box-shadow: none; text-shadow: none; border: none; width: 100%; } .mtk-org-detail-media .btn-instagram { background: var(--mtk-surface-2); color: var(--mtk-ink-soft); } .mtk-org-detail-media .btn-instagram:hover { background: var(--mtk-line); color: var(--mtk-ink); } .mtk-org-detail-media .btn-custom-orange { background: var(--mtk-orange); color: #fff; } .mtk-org-detail-media .btn-custom-orange:hover { background: var(--mtk-orange-hover); } .mtk-org-detail-info { flex: 1; min-width: 0; } /* Secciones de los formularios largos (crear/configurar evento), sustituyendo al boilerplate ".container-bc-transparent > .row > .row > .col-sm-12.container-bc" de la plantilla antigua por una simple sección con separador superior */ .mtk-org-form-section { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--mtk-line); } .mtk-org-form-section:first-child { padding-top: 0; margin-top: 0; border-top: none; } .mtk-org-form-section h4 { font-family: var(--mtk-font-display); font-size: 16.64px; font-weight: 700; color: var(--mtk-ink); margin: 0 0 6px; } .mtk-org-form-section > p { color: var(--mtk-muted); font-size: 13.44px; line-height: 1.6; margin: 0 0 16px; } .mtk-org-alert-danger { background: #FCE9E7; border-color: #F3C6C0; } .mtk-org-alert-danger strong { color: var(--mtk-danger); } .mtk-org-alert-danger a { color: var(--mtk-danger); text-decoration: underline; } /* ========================================================================== MODALES (Bootstrap 3) dentro de la extranet y de la ficha de evento pública. Se dejaban con el estilo por defecto de Bootstrap; ahora se adaptan al mismo lenguaje visual (tarjeta blanca, tipografía, botones naranja/teal/gris) usado en el resto de la página que los contiene. Escopado a .mtk-extranet (envuelve TODA página bajo extranetFrontend.html.twig, así que cubre cualquier modal de cualquier fase) y .mtk-event (ficha pública de evento), sin tocar el panel de administración interno. */ :is(.mtk-extranet, .mtk-event) .modal-content { border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); box-shadow: var(--mtk-shadow-hover); } :is(.mtk-extranet, .mtk-event) .modal-header { background: var(--mtk-surface); border-bottom: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m) var(--mtk-radius-m) 0 0; padding: 18px 24px; } :is(.mtk-extranet, .mtk-event) .modal-title, :is(.mtk-extranet, .mtk-event) .modal-header h5, :is(.mtk-extranet, .mtk-event) .modal-header h4, :is(.mtk-extranet, .mtk-event) .modal-header h3 { font-family: var(--mtk-font-display); font-weight: 700; font-size: 18.72px; color: var(--mtk-ink); margin: 0; } :is(.mtk-extranet, .mtk-event) .modal-header .close { margin-top: -2px; opacity: 1; color: var(--mtk-muted); text-shadow: none; font-weight: 400; font-size: 28px; line-height: 1; transition: color .15s ease; } :is(.mtk-extranet, .mtk-event) .modal-header .close:hover { color: var(--mtk-ink); opacity: 1; } :is(.mtk-extranet, .mtk-event) .modal-body { padding: 22px 24px; font-size: 13.76px; color: var(--mtk-ink-soft); } :is(.mtk-extranet, .mtk-event) .modal-body h3, :is(.mtk-extranet, .mtk-event) .modal-body h5 { font-family: var(--mtk-font-display); color: var(--mtk-ink); } :is(.mtk-extranet, .mtk-event) .modal-footer { border-top: 1px solid var(--mtk-line); padding: 16px 24px; } /* Alertas dentro de modales (mismo tono que .mtk-org-alert) */ :is(.mtk-extranet, .mtk-event) .modal-body .alert { border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); background: var(--mtk-orange-soft); color: var(--mtk-ink-soft); font-size: 13.44px; } :is(.mtk-extranet, .mtk-event) .modal-body .alert-danger { background: #FCE9E7; border-color: #F3C6C0; color: #8C2D22; } :is(.mtk-extranet, .mtk-event) .modal-body .alert-danger b, :is(.mtk-extranet, .mtk-event) .modal-body .alert-danger strong { color: var(--mtk-danger); } /* Botones dentro de modales, mismos tonos de marca que el resto de la página */ :is(.mtk-extranet, .mtk-event) .modal .btn { border-radius: var(--mtk-radius-s); font-weight: 700; box-shadow: none; text-shadow: none; border: none; } :is(.mtk-extranet, .mtk-event) .modal .btn-primary, :is(.mtk-extranet, .mtk-event) .modal .btn-custom-orange { background: var(--mtk-orange); color: #fff; } :is(.mtk-extranet, .mtk-event) .modal .btn-primary:hover, :is(.mtk-extranet, .mtk-event) .modal .btn-custom-orange:hover { background: var(--mtk-orange-hover); color: #fff; } :is(.mtk-extranet, .mtk-event) .modal .btn-success { background: var(--mtk-teal); color: #fff; } :is(.mtk-extranet, .mtk-event) .modal .btn-success:hover { background: #0a544d; } :is(.mtk-extranet, .mtk-event) .modal .btn-danger { background: var(--mtk-danger); color: #fff; } :is(.mtk-extranet, .mtk-event) .modal .btn-danger:hover { background: #A8281D; } :is(.mtk-extranet, .mtk-event) .modal .btn-default, :is(.mtk-extranet, .mtk-event) .modal .btn-instagram { background: var(--mtk-surface-2); color: var(--mtk-ink-soft); } :is(.mtk-extranet, .mtk-event) .modal .btn-default:hover, :is(.mtk-extranet, .mtk-event) .modal .btn-instagram:hover { background: var(--mtk-line); color: var(--mtk-ink); } /* Panel dentro de modales (p.ej. "Selecciona un nuevo recinto") ya hereda el look de :is(.mtk-extranet-content, .mtk-org-content) .panel salvo que el modal no siempre está anidado bajo esas clases exactas; lo cubrimos aparte */ :is(.mtk-extranet, .mtk-event) .modal .panel { border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); box-shadow: none; margin-bottom: 18px; } :is(.mtk-extranet, .mtk-event) .modal .panel-heading { background: var(--mtk-surface-2); border-bottom: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m) var(--mtk-radius-m) 0 0; padding: 13px 20px; font-family: var(--mtk-font-display); font-size: 15.36px; color: var(--mtk-ink); } :is(.mtk-extranet, .mtk-event) .modal .panel-body { padding: 20px; } :is(.mtk-extranet, .mtk-event) .modal .form-control { border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-s); box-shadow: none; padding: 11px 14px; font-size: 14.72px; color: var(--mtk-ink); background-color: var(--mtk-surface); height: auto; } :is(.mtk-extranet, .mtk-event) .modal .bootstrap-select.form-control { border: none; padding: 0; background: none; } :is(.mtk-extranet, .mtk-event) .modal .bootstrap-select .dropdown-toggle { border: 1px solid var(--mtk-line) !important; border-radius: var(--mtk-radius-s) !important; box-shadow: none !important; padding: 11px 30px 11px 14px !important; background-color: var(--mtk-surface) !important; background-image: none !important; } /* ========================================================================== CHECKOUT (publicFrontendCheckout.html.twig, templates/booking/checkoutEvent.html.twig y los fragmentos AJAX de templates/booking/: formAnonymousUserData, formNominativeTickets, formFreeCheckout, formCardPay, bookingFinish) No existe una plantilla de referencia en mt-frontend para este apartado (allí el checkout se externalizó a otro subdominio), así que estos componentes son de nueva creación, reutilizando los mismos tokens (--mtk-*) y patrones ya usados en el resto del rediseño. Los formularios reaprovechan el estilo de inputs/selects/botones ya definido para ".mtk-auth-card" (las tarjetas de formulario llevan ambas clases). ========================================================================== */ .mtk-checkout { font-family: var(--mtk-font-body); background: var(--mtk-bg); min-height: 70vh; } /* la cabecera (.mtk-brand-topbar, ver sección "BARRA DE MARCA" arriba) es "top-bar-fixed" (position:fixed, fuera del flujo), igual que en el resto del sitio. Por eso todo el contenido de esta página necesita su propio margen superior para no quedar tapado debajo: la altura exacta de la cabecera (74px) más un poco de aire extra antes de la primera tarjeta. Usamos margin-top (en vez de padding-top) en el div que envuelve todo el contenido para que el hueco quede fuera de la caja, no pegado a su borde. */ .mtk-checkout-content { margin-top: 100px; padding-bottom: 60px; } /* En modo widget (embebido en iframe, ver publicFrontendCheckout.html.twig) no se muestra la cabecera (.mtk-brand-topbar), por lo que no hace falta reservar sitio para ella: dejamos solo el "aire" extra. */ .mtk-checkout-content--widget { margin-top: 30px; } .mtk-checkout-countdown { background: var(--mtk-orange-soft); border: 1px solid var(--mtk-orange); border-radius: var(--mtk-radius-m); padding: 20px; margin-bottom: 22px; text-align: center; } .mtk-checkout-countdown-title { display: block; font-family: var(--mtk-font-display); font-size: 15.36px; font-weight: 700; color: var(--mtk-orange-hover); margin-bottom: 10px; } /* el contenido de este span lo rellena countdown.js (public/js/custom/countdown.js) con su propio markup ("MM:SS minutos"), así que solo podemos vestirlo desde fuera: tipografía general aquí, y un tamaño mayor forzado sobre los dos internos con los dígitos (el JS ya trae su propio font-size inline) */ .mtk-checkout-countdown-clock { display: block; font-family: var(--mtk-font-display); font-weight: 700; color: var(--mtk-ink); font-size: 14.72px; } .mtk-checkout-countdown-clock span { font-size: 34px !important; letter-spacing: .01em; } .mtk-checkout-countdown-clock .element { display: inline-block; background: var(--mtk-danger); color: #fff; border: none; height: auto !important; padding: 6px 14px !important; border-radius: var(--mtk-radius-s); font-size: 14.72px !important; } .mtk-checkout-grid { display: flex; gap: 30px; align-items: flex-start; } .mtk-checkout-aside { flex: 0 0 300px; max-width: 300px; } .mtk-checkout-main { flex: 1 1 auto; min-width: 0; } @media (max-width: 900px) { /* al pasar a columna, el eje transversal del flex pasa a ser el ancho: "align-items: flex-start" (pensado para alinear arriba aside/main en fila, en desktop) hace que cada hijo se quede con su ancho de contenido en vez de ocupar todo el ancho disponible. Lo forzamos aquí a "stretch" para que tanto el aside como el main (y dentro, las tarjetas de resumen de compra, entradas nominativas y finalizar reserva) ocupen todo el ancho de la página en responsive. */ .mtk-checkout-grid { flex-direction: column; align-items: stretch; } .mtk-checkout-aside { flex: 1 1 auto; max-width: none; width: 100%; } .mtk-checkout-main { width: 100%; } } .mtk-checkout-event-card { background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); overflow: hidden; box-shadow: var(--mtk-shadow); } .mtk-checkout-event-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--mtk-surface-2); } .mtk-checkout-event-card-body { padding: 18px 20px 20px; } .mtk-checkout-event-card-body h4 { font-family: var(--mtk-font-display); font-size: 16.64px; margin: 0 0 10px; font-weight: 700; } .mtk-checkout-event-card-body h4 a { color: var(--mtk-ink); } .mtk-checkout-event-card-body p { font-size: 12.8px; color: var(--mtk-muted); margin: 0 0 4px; line-height: 1.5; } .mtk-checkout-event-card-body a.mtk-checkout-map { font-size: 12.16px; color: var(--mtk-orange-hover); font-weight: 600; } .mtk-checkout-event-card-body .mtk-checkout-datetime { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mtk-line); font-size: 12.8px; color: var(--mtk-ink-soft); } .mtk-checkout-event-card-body .mtk-checkout-datetime div { margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .mtk-checkout-event-card-body .mtk-checkout-datetime svg { flex: none; opacity: .7; } /* -------- pasos del wizard (solo con entradas nominativas) -------- */ .mtk-checkout-steps { display: flex; background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); box-shadow: var(--mtk-shadow); padding: 22px 26px; margin-bottom: 24px; list-style: none; } .mtk-checkout-steps li { flex: 1; text-align: center; position: relative; color: var(--mtk-muted); } .mtk-checkout-steps li:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 56%; width: 88%; height: 2px; background: var(--mtk-line); z-index: 0; } .mtk-checkout-steps .step { width: 40px; height: 40px; border-radius: 50%; background: var(--mtk-surface-2); border: 2px solid var(--mtk-line); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; position: relative; z-index: 1; color: var(--mtk-muted); } .mtk-checkout-steps li.active .step { background: var(--mtk-orange); border-color: var(--mtk-orange); color: #fff; } .mtk-checkout-steps .caption { font-size: 11.84px; } .mtk-checkout-steps .caption b { display: block; color: var(--mtk-ink); font-weight: 700; } .mtk-checkout-steps li.active .caption b { color: var(--mtk-orange-hover); } .mtk-checkout-steps a { color: inherit; } /* -------- tarjetas de sección -------- */ .mtk-checkout-card { background: var(--mtk-surface); border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-m); box-shadow: var(--mtk-shadow); padding: 26px 28px; margin-bottom: 24px; } .mtk-checkout-card h4 { font-family: var(--mtk-font-display); font-size: 17.28px; font-weight: 700; color: var(--mtk-ink); margin: 0 0 20px; display: inline-block; } .mtk-checkout-card .buySafe { float: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.16px; color: var(--mtk-teal); font-weight: 700; margin-left: 14px; } .mtk-checkout-card-head { display: flex; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; } /* Paneles (acordeón de asistentes en entradas nominativas) */ .mtk-checkout-card .panel { border: 1px solid var(--mtk-line); border-radius: var(--mtk-radius-s); box-shadow: none; margin-bottom: 14px; } .mtk-checkout-card .panel-heading { background: var(--mtk-surface-2); border-radius: var(--mtk-radius-s) var(--mtk-radius-s) 0 0; padding: 12px 16px; } .mtk-checkout-card .panel-title { font-family: var(--mtk-font-display); font-size: 14.72px; margin: 0; font-weight: 700; color: var(--mtk-ink); } .mtk-checkout-card .panel-title a { color: inherit; } .mtk-checkout-card .panel-body { padding: 18px 16px 6px; } /* -------- resumen de compra -------- */ .mtk-checkout-summary-line { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--mtk-line); font-size: 14.08px; color: var(--mtk-ink); } .mtk-checkout-summary-line:first-of-type { padding-top: 0; } .mtk-checkout-summary-access { font-size: 12.8px; color: var(--mtk-muted); margin-top: 14px; } .mtk-checkout-summary-total { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 2px solid var(--mtk-ink); } .mtk-checkout-summary-total span { font-family: var(--mtk-font-display); font-size: 17.28px; font-weight: 700; color: var(--mtk-ink); } .mtk-checkout-summary-total strong { font-family: var(--mtk-font-display); font-size: 24px; color: var(--mtk-ink); } /* -------- métodos de pago -------- */ /* tarjeta de opción de pago, mostrada ya seleccionada por ser la única disponible (tarjeta) */ .mtk-payment-method { display: flex; align-items: flex-start; gap: 14px; border-radius: var(--mtk-radius-m); padding: 18px 20px; margin-bottom: 20px; border: 1.5px solid var(--mtk-line); } .mtk-payment-method--selected { border-color: var(--mtk-orange); background: var(--mtk-orange-soft); } .mtk-payment-method-radio { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--mtk-orange); background: var(--mtk-surface); display: flex; align-items: center; justify-content: center; } .mtk-payment-method-radio span { width: 10px; height: 10px; border-radius: 50%; background: var(--mtk-orange); } .mtk-payment-method-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--mtk-surface); box-shadow: var(--mtk-shadow); display: flex; align-items: center; justify-content: center; color: var(--mtk-orange-hover); font-size: 16px; } .mtk-payment-method-body { flex: 1; min-width: 0; } .mtk-payment-method-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--mtk-font-display); font-weight: 700; font-size: 14.72px; color: var(--mtk-ink); } .mtk-payment-method-cards img { height: 20px; vertical-align: middle; } .mtk-payment-method-body p { margin: 6px 0 0; font-size: 12.8px; color: var(--mtk-ink-soft); line-height: 1.55; } .mtk-checkout-card .panel-group .panel { margin-bottom: 0; } /* -------- checkbox de términos + botón "Finalizar compra" -------- */ .mtk-checkout-terms { font-size: 12.8px; color: var(--mtk-muted); font-weight: 400; text-transform: none; margin: 18px 0; } .mtk-checkout-terms a { color: var(--mtk-orange-hover); font-weight: 600; } /* Espaciado de los campos de los formularios del checkout (comprador, asistentes). Deliberadamente NO se llama "form-group": esa clase ya la usa Bootstrap dentro de ".form-horizontal" con otro significado (gutter de fila a -15px/-15px) y, puesta sobre una columna "col-sm-6", desplazaba las columnas y pegaba los campos entre sí. */ .mtk-checkout-field { margin-bottom: 18px; } /* Symfony añade class="required" a la