/* ============================================================================================================
   Tema IO27 de la web pública (12-10-2026) — rediseño con el material de la diseñadora (assets/images/io27/).
   Se carga después de todo (application/views/plantillas/plantilla.php) cuando config/tema.php lo activa, y pisa los
   colores de Webflow (interocio-f549b2.webflow.css), de la tienda compacta y de los estilos en línea de las vistas.
   La web de siempre se puede ver en producción (y la portada anterior, en /portada-clasica).
   Paleta: ciruela del logo, melocotón, coral (botones principales), crema de fondo, cielo y turquesa de la ilustración.
   01-11-2026 (Marcos, accesibilidad): coral y coral oscuro más oscuros (antes #e8622c y #c64d1c) para que el texto blanco
   sobre coral y el coral sobre crema lleguen a 4,5:1 (WCAG AA); etiquetas de torneo y taller con su tono oscuro.
   ============================================================================================================ */
:root {
  --io-ciruela: #783459; --io-ciruela-osc: #5a2342; --io-ciruela-mas-osc: #3f1830; --io-ciruela-claro: #f6e6ef;
  --io-melocoton: #ffc989; --io-melocoton-claro: #ffe3bf; --io-coral: #cb4a16; --io-coral-osc: #a63c11;
  --io-crema: #fff6ea; --io-cielo: #b7e6fa; --io-turquesa: #3fa7a0; --io-turquesa-osc: #30807b; --io-mostaza-osc: #a4671d; --io-tinta: #2b1b24; --io-gris: #6b5a63;
  --io-fondo-ilustrado: linear-gradient(180deg, rgba(63,24,48,.86) 0%, rgba(90,35,66,.90) 45%, rgba(63,24,48,.95) 100%),
                         url('/assets/images/io27/cartel-1300.webp');
}

/* ── Tipografía y fondo general ───────────────────────────────────────────────────────────────────────────── */
body { font-family: Poppins, system-ui, sans-serif; background-color: var(--io-crema); color: var(--io-tinta); }
h1, h2, h3, h4, .page-title-text, .store-title, .cta-title { font-family: Poppins, system-ui, sans-serif; }
.store-title, .page-title-text { font-weight: 800 !important; letter-spacing: -.01em; }
.text-color-medianoche, .text-color-medianoche strong, .margin-top.margin-large, .activities-title-list, .exponsor-title,
.parking-headings, .volunteers-headings, .pricing-line-break { color: var(--io-ciruela) !important; }
.text-color-aqua, .links, .exponsor-name, .login-register-link, .activity-detail-organizer-name { color: var(--io-coral-osc) !important; border-color: var(--io-coral-osc) !important; }
.links:hover, .exponsor-name:hover { color: var(--io-ciruela) !important; }
::selection { background: var(--io-melocoton); color: var(--io-tinta); }

/* ── Menú y pie ───────────────────────────────────────────────────────────────────────────────────────────── */
.navbar-logo-left.background-color-dark-medianoche, .navbar-logo-left-container, .nav-menu-two { background-color: var(--io-ciruela) !important; }
.background-color-dark-medianoche, .footer-light.background-color-dark-medianoche { background-color: var(--io-ciruela-osc) !important; }
.navbar-logo-left .button.background-color-aqua, .footer-light .footer-form-submit { background-color: var(--io-coral) !important; border-color: var(--io-coral) !important; color: #fff !important; }
.navbar-logo-left .user-logged { background-color: rgba(255,255,255,.12) !important; border: 2px solid rgba(255,201,137,.6) !important; }
.navbar-logo-left .user-logged:hover { background-color: var(--io-coral) !important; border-color: var(--io-coral) !important; }
.nav-dropdown-list { border-top: 3px solid var(--io-coral); }
.nav-dropdown-link:hover, .nav-dropdown-link:focus { color: var(--io-coral-osc) !important; }
.footer-light .links, .footer-light a.links, .footer-light a:hover { color: var(--io-melocoton) !important; border-color: var(--io-melocoton) !important; }

/* ── Botones ──────────────────────────────────────────────────────────────────────────────────────────────── */
.background-color-aqua, .button.background-color-aqua, .button-important, .entrada-details .button, .container-success .button,
.button.background-color-aqua:visited { background-color: var(--io-coral) !important; border-color: var(--io-coral) !important; color: #fff !important; }
.button.background-color-aqua:hover, .button-important:hover, .button.background-color-aqua:focus { background-color: var(--io-coral-osc) !important; border-color: var(--io-coral-osc) !important; color: #fff !important; }
.button.background-color-medianoche, .background-color-medianoche { background-color: var(--io-ciruela) !important; border-color: var(--io-ciruela) !important; }
.button.background-color-medianoche:hover { background-color: var(--io-ciruela-osc) !important; }
.button.is-icon.text-link, .button-important.is-icon.text-link { color: var(--io-coral-osc) !important; background: transparent !important; }
.container-create-user.padding-custom1.background-color-aqua, .container-photo-recordings.padding-custom1.background-color-aqua { background-color: var(--io-ciruela) !important; }
.button, .button-important, .w-button { border-radius: 999px; font-weight: 700; }

/* ── Cabeceras de página (gris claro con título verde) ────────────────────────────────────────────────────── */
.section-page-title { background: linear-gradient(180deg, #a9dcf3 0%, var(--io-cielo) 100%) !important; }
.section-page-title .page-title-text, .page-title-text.text-color-medianoche { color: var(--io-ciruela) !important; text-shadow: none !important; }

/* ── Secciones oscuras con fondo de imagen o verde ────────────────────────────────────────────────────────── */
/* .section-activities sólo con el fondo de imagen (novedades, mesas de demostración): en la ficha del expositor es clara */
.section-store, .section-activities[style*="bg-activities"], .section-hero {
  background-color: var(--io-ciruela-osc) !important; background-image: var(--io-fondo-ilustrado) !important;
  background-size: cover !important; background-position: center 30% !important; background-attachment: fixed; }
.section-intro-visitors, .section-security, .section-exhibitor-bonus { background-color: var(--io-ciruela) !important; }
@media (hover: none) { .section-store, .section-activities[style*="bg-activities"], .section-hero { background-attachment: scroll; } }

/* ── Etiquetas de actividades ─────────────────────────────────────────────────────────────────────────────── */
.chip-label.demos, .activity-label.type-demos { background-color: var(--io-ciruela) !important; border-color: var(--io-ciruela) !important; }
.chip-label.taller, .activity-label.type-taller, .activity-label.taller { background-color: var(--io-turquesa-osc) !important; border-color: var(--io-turquesa-osc) !important; color: #fff !important; }
.chip-label.torneo, .activity-label.type-torneo, .activity-label.torneo { background-color: var(--io-mostaza-osc) !important; border-color: var(--io-mostaza-osc) !important; color: #fff !important; }

/* ── Tienda compacta, pases y merch (assets/css/tienda-compacta.css) ──────────────────────────────────────── */
.tienda-movil .contador-btn.mas { background: var(--io-coral) !important; }
.barra-comprar { background: var(--io-gris) !important; }   /* 01-11-2026: vacía, gris de IO27 (era el verde grisáceo de 2026) */
.barra-compra.con-entradas .barra-comprar { background: var(--io-coral) !important; }
.pestana-dia.activa, .pestanas-dia .pestana-dia.activa { color: var(--io-ciruela) !important; }
.fila-tienes, .fila-tienes a { color: var(--io-ciruela) !important; }
.info-movil-cuerpo a { color: var(--io-melocoton) !important; }
.selector-formato button.activa, .selector-formato button[aria-pressed="true"] { color: var(--io-ciruela) !important; }

/* ── Área personal y plano (assets/css/area-personal.css, plano-web.css) ──────────────────────────────────── */
.area { background-color: var(--io-ciruela-osc) !important; background-image: var(--io-fondo-ilustrado) !important; background-size: cover !important; background-attachment: fixed; }
.area .area-pestana.activa { color: var(--io-ciruela) !important; }
.area .area-boton { background: var(--io-coral) !important; }
.area .area-boton-suave { background: var(--io-ciruela-claro) !important; color: var(--io-ciruela) !important; }
.area .area-boton-pagar { background: var(--io-coral) !important; }
.area .area-tarjeta h2, .area .area-pedido h2, .area .area-entrada-cuando, .area .area-actividad-titulo, .area-modal-caja h2 { color: var(--io-ciruela) !important; }
.area .area-enlace-boton, .area .area-enlaces a, .area .area-tarjeta a:not(.area-boton):not(.area-actividad-destacada), .area .area-incluye a,
.plano-actividades a, .plano-web-enlace a, .plano-lo-tuyo button { color: var(--io-ciruela) !important; }
.area .area-info .area-enlace-boton, .area .area-pie-lista .area-enlace-boton, .area .area-cabecera-lista .area-enlace-boton { color: var(--io-melocoton) !important; }   /* 19-10-2026: también arriba de la agenda */
.area .area-estado-tuya { background: #e7f4f2 !important; color: #1f6b66 !important; }
.area .area-estado-sin { background: #fff1e6 !important; color: #9a4310 !important; }
.area-modal .area-boton { background: var(--io-coral) !important; }
.area .area-contador { background: var(--io-coral) !important; }
.area .area-pestana.activa .area-contador { background: var(--io-ciruela) !important; }
.area .area-app-enlace, .area .area-app-enlace:hover, .area .area-app-enlace:focus { color: var(--io-ciruela) !important; }   /* enlace a la app (12-10-2026) */
.area .area-actividad-destacada { border-left-color: var(--io-coral) !important; }
.area .area-lote { background: var(--io-ciruela-mas-osc) !important; }   /* 29-10-2026: mandar varias entradas juntas */
.area .area-lote .area-enlace-boton { color: var(--io-melocoton) !important; }
.area .area-entrada-marcada { background: var(--io-crema) !important; box-shadow: inset 4px 0 0 var(--io-coral); }
.area .area-marcar { accent-color: var(--io-coral); }
.area .area-aviso-info { background: var(--io-ciruela-claro) !important; color: var(--io-ciruela-osc) !important; }
.plano-punto span { background: var(--io-coral) !important; }
.plano-zoom button { color: var(--io-ciruela) !important; }

/* ── Estilos en línea de las vistas (style="…" con los verdes de antes) ──────────────────────────────────── */
[style*="background-color: #1c5351"], [style*="background: #1c5351"], [style*="background:#1c5351"], [style*="background-color:#1c5351"],
[style*="background: #17493b"], [style*="background-color: #17493b"] { background-color: var(--io-ciruela-osc) !important; }
[style*="background: #64BD82"], [style*="background:#64BD82"], [style*="background-color: #64BD82"], [style*="background-color:#64BD82"],
[style*="background: #1f8a4c"], [style*="background-color: #1f8a4c"] { background-color: var(--io-coral) !important; border-color: var(--io-coral) !important; }
[style*="color: #1c5351"], [style*="color:#1c5351"], [style*="color: #17493b"], [style*="color: #0f3d33"] { color: var(--io-ciruela) !important; }
[style*="color: #64BD82"], [style*="color:#64BD82"], [style*="color: #1f8a4c"] { color: var(--io-coral-osc) !important; }
[style*="border-color: #64BD82"], [style*="border: 1px solid #64BD82"], [style*="border:1px solid #64BD82"] { border-color: var(--io-coral) !important; }
[style*="background-color: #64BD82"][style*="color"] { color: #fff !important; }

/* ── Aviso de cookies ─────────────────────────────────────────────────────────────────────────────────────── */
.gdpr-cookie-notice { background: var(--io-ciruela-mas-osc) !important; }
.gdpr-cookie-notice-nav-item-btn { background: var(--io-coral) !important; }
.gdpr-cookie-notice a { color: var(--io-melocoton) !important; }

/* ── Lo que quedaba verde en páginas concretas (repaso del 12-10) ─────────────────────────────────────────── */
.selector-vista button.activa, [data-vistas] button.activa, .vistas-selector button.activa, button.activa[aria-pressed="true"] { background: var(--io-ciruela) !important; color: #fff !important; border-color: var(--io-ciruela) !important; }
.selector-vista button.activa svg, .selector-vista button.activa rect { color: #fff !important; fill: currentColor; }
.activity-label.etiqueta-acceso { background-color: var(--io-ciruela-claro) !important; color: var(--io-ciruela) !important; border-color: var(--io-ciruela-claro) !important; }
.activity-label.taller, .activity-label.Talleres { background-color: var(--io-turquesa-osc) !important; }
.comprar-pase.boton-pase, .cart-button, button.cart-button { background-color: var(--io-coral) !important; border-color: var(--io-coral) !important; color: #fff !important; }
.comprar-pase.boton-pase:hover, .cart-button:hover { background-color: var(--io-coral-osc) !important; }
.exhibitor-stand-info .agenda-web-boton { border-color: var(--io-coral) !important; color: var(--io-ciruela) !important; }
.exhibitor-stand-info .agenda-web-boton[aria-pressed="true"] { background: var(--io-coral) !important; color: #fff !important; }
.exhibitor-stand-info .agenda-web-ver { color: var(--io-ciruela) !important; }
.nombre-nivel-1, .nombre-nivel-2, .nombre-nivel-3, .nombre-nivel-4 { color: var(--io-ciruela) !important; }
.pricing-table-cell, .pricing-table-age-cell, .pricing-table-cell-kids { background-color: var(--io-ciruela) !important; }
.logo-interocio-white svg path, .logo-interocio-white svg { fill: var(--io-ciruela) !important; color: var(--io-ciruela) !important; }
a:has(> .fa-dice), .fa-dice { color: var(--io-ciruela) !important; }
.aviso-mesas-demo a { color: var(--io-ciruela) !important; background: var(--io-ciruela-claro) !important; border-color: var(--io-ciruela-claro) !important; }
.pricing-table-cell, .pricing-table-age-cell, .pricing-table-cell-kids { border-color: var(--io-ciruela) !important; }
/* 12-10-2026 (Carolina): sobre el ciruela, el texto de Webflow (negro y gris) no se leía; en blanco */
.pricing-table-cell, .pricing-table-age-cell, .pricing-table-cell-kids,
.pricing-table-cell .prize-text, .pricing-table-cell .each-day-text, .pricing-table-age-cell .ticket-type-text,
.pricing-table-cell-kids .prize-text, .pricing-table-cell-kids .each-day-text { color: #fff !important; }
.pricing-table-age-cell .ticket-age { color: var(--io-ciruela-claro) !important; }
.pricing-table-cell .each-day-text, .pricing-table-cell-kids .each-day-text { opacity: .85; font-weight: 500 !important; }
.pricing-table-cell .discount-text, .pricing-table-cell-kids .discount-text { color: rgba(255,255,255,.78) !important; }   /* 01-11-2026: antes .6 (contraste) */
.pricing-grid-mobile .pricing-table-age-cell { padding-left: 14px !important; }
.pricing-grid-mobile .pricing-table-cell { padding-right: 14px !important; }
.logo-interocio-white { color: var(--io-ciruela) !important; }

/* ── Cabeceras de página: un personaje de la ilustración asomando a la derecha (ordenador) ────────────────── */
@media (min-width: 992px) {
  .section-page-title { position: relative; overflow: hidden; min-height: 120px; }
  .section-page-title::after { content: ''; position: absolute; right: max(24px, calc((100vw - 1180px) / 2)); bottom: -18px; width: 170px; height: 150px;
    background: url('/assets/images/io27/sapo-casa.webp') right bottom / contain no-repeat; pointer-events: none; }
}

/* ── Acceso, registro y recuperación: fondo ilustrado y el formulario en una tarjeta ──────────────────────── */
body.login-page { background-color: var(--io-ciruela-osc) !important; background-image: var(--io-fondo-ilustrado) !important; background-size: cover !important; background-position: center 40% !important; background-attachment: fixed; min-height: 100vh; }
.login-page .section-login-register { background: rgba(63, 24, 48, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 22px; padding: 28px 24px 26px !important; max-width: 420px; margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.login-page .login-register-input { border-radius: 10px !important; }
.login-page .login-register-link, .login-page a { color: var(--io-melocoton) !important; }
.footer-copyright { letter-spacing: normal !important; word-spacing: normal !important; text-align: left !important; font-family: Poppins, sans-serif !important; }

/* ── Accesibilidad (01-11-2026, revisión de Marcos): contrastes de 4,5:1 que quedaban ─────────────────────── */
.container-create-user.background-color-aqua .text-color-medianoche, .container-create-user.background-color-aqua .text-color-black { color: #fff !important; }
.btn-solicitud-mesa, .btn-solicitud-mesa:visited, .btn-solicitud-mesa div { color: #fff !important; }
label.select-label { display: block; font-weight: inherit; margin-bottom: 0; }   /* antes era un div: los filtros de actividades, con su etiqueta asociada */

/* ── Merchandising (01-11-2026, Marcos): tarjetas blancas como en el resto de la web y el aviso en una caja lisa ── */
.merch-aviso { background: #fff !important; color: var(--io-tinta) !important; border-left: 4px solid var(--io-coral); border-radius: 10px; padding: 12px 16px; text-align: left !important; }
.merch-aviso a { color: var(--io-coral-osc) !important; font-weight: 600; }
.merch-aviso .fa-exclamation-triangle { color: var(--io-coral); }
.merch-card { background: #fff !important; border: 0 !important; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.merch-card h5 { color: var(--io-tinta) !important; }
.merch-card .card-body p { color: var(--io-gris) !important; }
.merch-card .card-body span[style*="font-size: 20px"] { color: var(--io-ciruela) !important; }
.merch-card .card-footer { background: #faf5f0 !important; border-top: 1px solid #eee3d6 !important; }
.merch-card .qty-input-list { background: #fff !important; color: var(--io-tinta) !important; border-color: #d9cfc4 !important; }
.merch-card .btn-outline-light { color: var(--io-ciruela) !important; border-color: var(--io-ciruela) !important; }
.merch-card .btn-outline-light:hover { background: var(--io-ciruela) !important; color: #fff !important; }
/* 01-11-2026: Bootstrap subraya todo enlace al pasar; en las tarjetas y botones (enlaces de bloque de Webflow) salía todo subrayado */
a.w-inline-block:hover, a.w-inline-block:focus, a.activity-box:hover, a.activity-box:focus, a.mesa-enlace:hover, a.button:hover, a.w-button:hover { text-decoration: none; }

/* ── Pases de torneos, formato con imágenes (01-11-2026): tarjetas blancas como en Novedades ─────────────── */
.actividades-list .actividad-item { background: #fff !important; border: 0 !important; box-shadow: 0 2px 10px rgba(0,0,0,.12); color: var(--io-tinta); }
.actividades-list .actividad-item .actividad-header h2 { color: #1d2b36 !important; }
.actividades-list .actividad-item .actividad-info, .actividades-list .actividad-item .actividad-info * { color: #555 !important; }   /* la entradilla trae sus <p>: quedan fuera de .actividad-descripcion */
.actividades-list .actividad-item .actividad-info .actividad-metadata i { color: var(--io-ciruela) !important; }
.actividades-list .tipo-actividad { background: var(--io-mostaza-osc) !important; color: #fff !important; }
.actividades-list .background-color-gray { background-color: var(--io-ciruela-claro) !important; color: var(--io-ciruela) !important; }
.actividades-list .background-color-gray:hover { background-color: var(--io-ciruela) !important; color: #fff !important; }

/* ── Restos de verde de 2026 (01-11-2026) ─────────────────────────────────────────────────────────────────── */
.alert.alert-info { background: var(--io-ciruela-claro) !important; color: var(--io-ciruela-osc) !important; border-color: #e9cddd !important; }
.aviso-ninos { color: var(--io-melocoton-claro) !important; }
.activity-label.concurso, .activity-label.Concursos, .chip-label.concurso { background-color: var(--io-coral-osc) !important; border-color: var(--io-coral-osc) !important; color: #fff !important; }
.io27-video-ayuda { border-color: var(--io-melocoton) !important; }
.enlace-sobre-oscuro, .enlace-sobre-oscuro:visited { color: var(--io-melocoton) !important; font-weight: 600; }   /* 01-11-2026: enlaces sobre el fondo ilustrado */

/* ── Botones (01-11-2026, Falo y Marcos): todos en píldora, como en la portada; antes unos cuadrados y otros redondos ── */
.button, .w-button, input.w-button, .button-important, a.button.w-inline-block, .btn-add-cart-list, .merch-card .btn,
.cart-button-text, .boton-pase, .barra-comprar, .area .area-boton, .area .area-boton-suave, .area .area-boton-pagar {
  border-radius: 999px !important;
}
.button:not(.text-link):not(.is-icon.text-link), .w-button { padding-left: 22px; padding-right: 22px; font-weight: 700; }
.navbar-logo-left .button, .navbar-logo-left .w-button, #language-selector { border-radius: 999px !important; }
.button.is-icon.text-link { border-radius: 0 !important; }   /* los enlaces con flecha siguen siendo enlaces */
.gdpr-cookie-notice-nav-item-btn, .gdpr-cookie-notice-modal-footer-item-btn { border-radius: 999px !important; }