/* * classicspark-asistente-eventos.css - 4.0.83 * * El asistente para crear un evento (los seis pasos) y su barra superior. * * Hasta la 4.0.82 esto eran 2 hojas con el número de la entrega que las creó. Aquí van juntas, * en el mismo orden en que se cargaban, con una marca donde empieza cada una. El orden importa: * una regla de más abajo gana a otra igual de más arriba. * * Venía de: classicspark-2732.css, classicspark-2746.css */ /* ==== antes classicspark-2732.css ==== */ /* Sprint 2.7.32: deterministic meeting fields and actions. */ .cs27-meeting-wizard-page .cs2732-meeting-capacity { width: min(240px, 100%) !important; max-width: 240px !important; padding: 0 !important; } .cs27-meeting-wizard-page .cs2732-meeting-capacity > .row { margin: 0 !important; } .cs27-meeting-wizard-page .cs2732-meeting-capacity #divLimitPerson { width: 100% !important; max-width: 200px !important; padding: 0 !important; } .cs27-meeting-wizard-page #meetinglimitperson { max-width: 180px !important; } .cs27-meeting-wizard-page #divMeetingWhere > .form-group > label { display: block !important; margin-bottom: 7px !important; } .cs27-meeting-wizard-page #citymeeting + .select2-container { display: block !important; width: 100% !important; } .cs27-meeting-wizard-page #citymeeting ~ .select2-container ~ .select2-container { display: none !important; } .cs27-meeting-wizard-page #divMeetingMain [onclick*="meetingAddSave"]:not([data-cs-meeting-save]) { display: none !important; } .cs27-meeting-wizard-page #divMeetingMain[data-cs-main-step="5"] [data-cs-meeting-save], .cs27-meeting-wizard-page #divMeetingMain[data-cs-main-step="6"] [data-cs-meeting-save], .cs27-meeting-wizard-page #divMeetingMain[data-cs-main-step="7"] [data-cs-meeting-next] { display: none !important; } .cs27-meeting-wizard-page #divMeetingMain[data-cs-main-step="5"] [data-cs-meeting-next], .cs27-meeting-wizard-page #divMeetingMain[data-cs-main-step="6"] [data-cs-meeting-next], .cs27-meeting-wizard-page #divMeetingMain[data-cs-main-step="7"] [data-cs-meeting-save] { display: inline-flex !important; } @media (max-width: 700px) { .cs27-meeting-wizard-page .cs2732-meeting-capacity, .cs27-meeting-wizard-page .cs2732-meeting-capacity #divLimitPerson, .cs27-meeting-wizard-page #meetinglimitperson { width: 100% !important; max-width: none !important; } } /* ==== antes classicspark-2746.css ==== */ /* Sprint 2.7.46 — creación de eventos en seis pasos y navegación superior. */ .cs27-meeting-wizard-page .cs2746-wizard-toolbar{min-height:72px;padding:13px 20px;position:sticky;top:0;z-index:25;border-bottom:1px solid #e9e2e4;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;box-shadow:0 8px 18px rgba(45,30,36,.06);isolation:isolate} .cs2746-wizard-toolbar>div:first-child span,.cs2746-wizard-toolbar>div:first-child strong{display:block}.cs2746-wizard-toolbar>div:first-child span{margin-bottom:3px;color:#c90035;font:700 10px gilroy-semibold,Arial,sans-serif;letter-spacing:.08em}.cs2746-wizard-toolbar>div:first-child strong{color:#342e33;font:17px gilroy-semibold,Arial,sans-serif}.cs2746-wizard-toolbar>div:last-child{display:flex;align-items:center;gap:8px}.cs2746-wizard-toolbar .btn{min-height:42px;margin:0!important;padding:9px 16px!important;border-radius:10px!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:13px gilroy-semibold,Arial,sans-serif!important}.cs2746-wizard-toolbar .btn-primary{border-color:#c90035!important;background:#c90035!important;color:#fff!important}.cs2746-wizard-toolbar .btn-gray{border:1px solid #ded6d9!important;background:#fff!important;color:#665e64!important}.cs2746-wizard-toolbar button:disabled{opacity:.42;cursor:not-allowed}.cs2746-wizard-toolbar [hidden]{display:none!important} .cs27-meeting-wizard-page .cs2746-opening-panel{padding-top:28px!important}.cs2746-meeting-setup__grid{display:grid;gap:18px}.cs2746-choice-section{padding:18px;border:1px solid #e9e1e3;border-radius:15px;background:#fcfbfb}.cs2746-choice-section>header{margin-bottom:14px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;align-items:center}.cs2746-choice-section>header>span{width:26px;height:26px;border:1px solid #dfd5d8;border-radius:50%;display:grid;place-items:center;background:#fff}.cs2746-choice-section>header>span:after{content:'';width:8px;height:8px;border-radius:50%;background:#c9c0c4}.cs2746-choice-section>header strong,.cs2746-choice-section>header small{display:block}.cs2746-choice-section>header strong{font:16px gilroy-semibold,Arial,sans-serif}.cs2746-choice-section>header small{margin-top:2px;color:#7c747a;font-size:12px}.cs2746-choice-section.is-complete{border-color:#e7c3cd;background:#fffafb}.cs2746-choice-section.is-complete>header>span{border-color:#c90035;background:#c90035}.cs2746-choice-section.is-complete>header>span:after{content:'✓';width:auto;height:auto;background:transparent;color:#fff;font:11px Arial,sans-serif}.cs2746-choice-section.cs2722-invalid{border-color:#c90035!important;box-shadow:0 0 0 3px rgba(201,0,53,.08)} .cs2746-choice-section>.container{width:100%;max-width:none;padding:0}.cs2746-choice-section>.container>.row{margin:0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}.cs2746-choice-section>.container>.row>div{width:auto!important;max-width:none!important;padding:0!important}.cs2746-choice-section>.container>.row>div:empty{display:none!important}.cs2746-choice-section .modal-cp-encuentros--box{min-height:104px!important;padding:15px!important;align-items:center!important;justify-content:center!important;flex-direction:row!important;gap:9px!important;border-radius:12px!important}.cs2746-choice-section .modal-cp-encuentros--box>svg{width:32px!important;height:32px!important;margin:0!important;flex:0 0 auto}.cs2746-choice-section .modal-cp-encuentros--box .privpub,.cs2746-choice-section .cs2746-choice-label{margin:0!important;line-height:1.25}.cs2746-choice-section .modal-cp-encuentros--box.is-selected{border-color:#c90035!important;background:#fff1f5!important;box-shadow:0 7px 19px rgba(117,32,57,.09)!important}.cs2746-choice-section .modal-cp-encuentros--box.is-selected:after{content:'✓';width:25px;height:25px;margin-left:auto;border-radius:50%;display:grid;place-items:center;flex:0 0 25px;background:#c90035;color:#fff;font:12px Arial,sans-serif}.cs2746-choice-section .login-quest,.cs2746-choice-section .modal-cp-encuentros--box.is-selected .login-quest{width:20px;height:20px;margin:0!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px}.cs2746-choice-section .login-quest svg{width:16px!important;height:16px!important;margin:0!important}.cs2746-choice-section .modal-cp-encuentros--box:focus-visible{outline:3px solid rgba(201,0,53,.2);outline-offset:2px} .cs27-meeting-wizard-page #divMeetingPayType>.container>.row{grid-template-columns:repeat(3,minmax(0,1fr))!important}.cs27-meeting-wizard-page #divMeetingPayType .modal-cp-encuentros--box.is-selected{border-color:#c90035!important;background:#fff1f5!important;box-shadow:0 8px 22px rgba(117,32,57,.1)!important}.cs27-meeting-wizard-page #divMeetingPayType>.modal-footer{display:none!important}.cs27-meeting-wizard-page #divMeetingPayType.cs2722-invalid{box-shadow:inset 0 0 0 2px #c90035}.cs27-meeting-wizard-page #divMeetingMain>.cs27-meeting-wizard-actions{display:none!important} .cs27-meeting-wizard-page #streamingCPLabel label,.cs27-meeting-wizard-page #streamingCPLabel2 label,.cs27-meeting-wizard-page #streamingYTLabel label,.cs27-meeting-wizard-page #streamingZOLabel label{cursor:pointer}.cs27-meeting-wizard-page .cs2746-streaming-card{cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}.cs27-meeting-wizard-page .cs2746-streaming-card:hover{border-color:#d8a8b5!important;transform:translateY(-1px)}.cs27-meeting-wizard-page .cs2746-streaming-card.is-selected,.cs27-meeting-wizard-page #streamingCPLabel:has(input:checked),.cs27-meeting-wizard-page #streamingYTLabel:has(input:checked),.cs27-meeting-wizard-page #streamingZOLabel:has(input:checked){border-color:#c90035!important;background:#fff1f5!important;box-shadow:0 0 0 3px rgba(201,0,53,.07)}.cs27-meeting-wizard-page .cs2746-streaming-card.is-unavailable{background:#fcfafb}.cs27-meeting-wizard-page .cs2746-streaming-card:focus-visible{outline:3px solid rgba(201,0,53,.2);outline-offset:2px}.cs27-meeting-wizard-page #divLinkCP[style*="display: none"],.cs27-meeting-wizard-page #divLinkYT[style*="display: none"],.cs27-meeting-wizard-page #divLinkZO[style*="display: none"]{display:none!important}body>.popover{z-index:20040!important} @media(max-width:980px){.cs27-meeting-wizard-page .cs2746-wizard-toolbar{top:0}.cs2746-choice-section .modal-cp-encuentros--box{min-height:92px!important}} @media(max-width:700px){.cs27-meeting-wizard-page .cs2746-wizard-toolbar{padding:11px 13px}.cs2746-wizard-toolbar>div:first-child strong{font-size:14px}.cs2746-wizard-toolbar>div:last-child{gap:5px}.cs2746-wizard-toolbar .btn{min-width:42px;padding:8px 10px!important;font-size:0!important}.cs2746-wizard-toolbar .btn i{margin:0;font-size:13px}.cs2746-wizard-toolbar [data-cs-meeting-save]{font-size:11px!important}.cs2746-choice-section{padding:14px}.cs2746-choice-section>.container>.row,.cs27-meeting-wizard-page #divMeetingPayType>.container>.row{grid-template-columns:1fr!important}.cs2746-choice-section .modal-cp-encuentros--box{min-height:78px!important}.cs2746-choice-section>header{grid-template-columns:26px minmax(0,1fr)}.cs2746-choice-section>header small{font-size:11px}} /* * 2.8.43.258 - LA NOTA DEL PASO 2. Tres tarjetas y nada mas era una pantalla vacia que ademas se * callaba lo importante: que el pago de la entrada lo cobra el organizador. Aparece al elegir, en * el hueco que ya habia, y dice de quien es ese dinero antes de que siga adelante. */ .cs2758-access-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;width:min(100%,760px);margin:18px auto 4px;padding:15px 17px;border:1px solid #f0dbe1;border-radius:16px;background:linear-gradient(180deg,#fffafb,#fff)} .cs2758-access-note__badge{align-self:center;padding:5px 12px;border-radius:999px;background:#c90035;color:#fff;font:700 12px/1 gilroy-semibold,Arial,sans-serif;white-space:nowrap} .cs2758-access-note p{margin:0;color:#4b4450;font-size:13px;line-height:1.5} @media (max-width:640px){.cs2758-access-note{grid-template-columns:minmax(0,1fr);gap:9px}.cs2758-access-note__badge{justify-self:start}} /* --------------------------------------------------------------------------------------------- 2.8.43.260 - EL ULTIMO PASO: lo que falta pagar, y los dos botones que antes no se entendian. El panel de «Listo» es el del modal de toda la vida, y en el asistente su `.modal-footer` se quedaba sin la caja que lo alineaba: un boton gris pegado al borde, otro al lado, y el gris ponia «Cerrar» aunque lo que hace aqui es LLEVAR AL EVENTO. Aqui se le da su propia fila. Y encima va la factura, cuando la hay. Es la unica pantalla por la que el organizador pasa seguro, asi que es donde tiene que estar. --------------------------------------------------------------------------------------------- */ .cs27-meeting-wizard-page #divMeetingFinish .modal-footer{box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:24px auto 8px;padding:0;border-top:0;width:min(100%,760px)} .cs27-meeting-wizard-page #divMeetingFinish .modal-footer>.btn{margin:0!important;min-width:200px;padding:12px 22px;border-radius:11px;font:600 14px/1.2 gilroy-semibold,Arial,sans-serif;text-align:center} .cs27-meeting-wizard-page #divMeetingFinish .modal-footer>#btnMeetingGo{background:#efe9ec;color:#4b4450!important;border:1px solid #e2d7dc} .cs27-meeting-wizard-page #divMeetingFinish .modal-footer>#btnMeetingGo:hover,.cs27-meeting-wizard-page #divMeetingFinish .modal-footer>#btnMeetingGo:focus{background:#e5dde1;color:#3a333e!important} .cs27-meeting-wizard-page #divMeetingFinish.cs260-finish--unpaid .cs2722-meeting-success{margin-bottom:0} .cs260-finish-pay{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;width:min(100%,760px);margin:20px auto 0;padding:20px 22px;border:1px solid #f0c8d3;border-radius:18px;background:linear-gradient(180deg,#fff5f8,#fff)} .cs260-finish-pay strong{display:block;color:#3a333e;font:700 17px/1.35 gilroy-semibold,Arial,sans-serif} .cs260-finish-pay p{margin:7px 0 0;color:#5b5460;font-size:14px;line-height:1.55} .cs260-finish-pay b{display:block;margin-top:10px;color:#a10f36;font:700 16px/1.3 gilroy-semibold,Arial,sans-serif} .cs260-finish-pay__go{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;padding:14px 24px;border-radius:12px;background:#b3123c;color:#fff!important;font:700 15px/1.2 gilroy-semibold,Arial,sans-serif;text-decoration:none;box-shadow:0 12px 24px rgba(179,18,60,.22)} .cs260-finish-pay__go:hover,.cs260-finish-pay__go:focus{background:#95102f;color:#fff!important;text-decoration:none} @media (max-width:640px){.cs260-finish-pay{grid-template-columns:minmax(0,1fr)}.cs260-finish-pay__go{justify-content:center}.cs27-meeting-wizard-page #divMeetingFinish .modal-footer>.btn{width:100%!important;min-width:0}} /* --------------------------------------------------------------------------------------------- 2.8.43.261 - EL PASO 3 POR DENTRO, Y EL FOGONAZO DE LA CARGA. Lo que vio Eudes el 13/09/2026 al entrar en `crearEncuentro`: «el paso 1 comienza con uno de esos flash, donde parece que primero se ven los botones iniciales y luego el resto». Tenia razon y la causa es literal: el asistente se construye dentro de un `setTimeout(…,0)` DESPUES de `$(function(){})`, o sea despues de pintar. El navegador enseña el HTML del modal en crudo -las tarjetas a lo ancho, sin barra, sin columnas- y una fraccion de segundo despues se reordena entero delante de sus ojos. La cura no es adelantar la construccion -eso rompe select2, el datetimepicker y `functions`, que necesitan su turno-: es NO ENSEÑAR el formulario hasta que este puesto. Con una red: si el JS no llegara a correr nunca, la animacion de abajo lo enseña igual a los 1,5 s. Un formulario invisible para siempre seria peor que el fogonazo. --------------------------------------------------------------------------------------------- */ .cs27-meeting-wizard-page .cs27-meeting-wizard-form{opacity:0;animation:cs261-aparece 0s linear 1.5s forwards} .cs27-meeting-wizard-page.is-ready .cs27-meeting-wizard-form{opacity:1;animation:none} /* Y MIENTRAS TANTO SE RESERVA EL SITIO, para que la tarjeta no crezca de golpe al aparecer. Se reserva y no se RECORTA a proposito: con un `max-height`, si el JS no llegara a correr nunca, a los 1,5 s aparece un formulario cortado por la mitad, que es peor que el fogonazo que se arregla. En crudo el paso 1 mide 430 px -medido en el render-, asi que no sobra hueco. */ .cs27-meeting-wizard-page:not(.is-ready) .cs27-meeting-wizard-form{min-height:430px} @keyframes cs261-aparece{to{opacity:1}} /* EL PADDING. Eran 38 px de panel + 20 de tarjeta + los de la seccion: el contenido empezaba a sesenta y pico pixeles del borde y en el movil se comia media pantalla. */ .cs27-meeting-wizard-form>.modal-body{padding:24px 26px!important} /* LOS INPUT-GROUP. `.input-group>.form-control` llevaba `border-radius:10px 0 0 10px` SIEMPRE, o sea suponiendo que el añadido va detras. En «https://» va DELANTE, asi que el campo tenia las esquinas redondeadas justo contra el prefijo: eso es lo que no se integraba. Ahora se decide por la posicion -primero o ultimo-, que es lo unico que de verdad manda. */ /* CON `#divMeetingMain` DELANTE, Y NO ES ADORNO: la regla que redondeaba las cuatro esquinas es `.cs27-meeting-wizard-form #divMeetingMain .form-control{border-radius:10px!important}`, y lleva un ID. Un selector de solo clases nunca le gana por muchas que se apilen, `!important` incluido: se vio en el render, con el campo redondeado por la izquierda contra el prefijo, igual que antes. */ .cs27-meeting-wizard-form #divMeetingMain .input-group>.form-control:not(:first-child){border-top-left-radius:0!important;border-bottom-left-radius:0!important} .cs27-meeting-wizard-form #divMeetingMain .input-group>.form-control:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important} .cs27-meeting-wizard-form #divMeetingMain .input-group-prepend>.input-group-text{border:1px solid #ddd5d8!important;border-right:0!important;border-radius:10px 0 0 10px!important;background:#f7f3f4!important;color:#6b636a!important;padding:0 15px!important;font:13px gilroy-semibold,Arial,sans-serif!important} .cs27-meeting-wizard-form #divMeetingMain .input-group-append>.input-group-text,.cs27-meeting-wizard-form #divMeetingMain .input-group-append>button{border:1px solid #ddd5d8!important;border-left:0!important;border-radius:0 10px 10px 0!important;background:#f7f3f4!important;color:#6b636a!important;padding:0 15px!important} /* La altura la manda el CAMPO, no el añadido. Con `min-height` en los dos, el prefijo salia 48 px y el campo 46, y se veia el escalon. Ahora el añadido se estira hasta lo que mida el campo. */ .cs27-meeting-wizard-form #divMeetingMain .input-group>.form-control{min-height:46px!important} .cs27-meeting-wizard-form #divMeetingMain .input-group-prepend,.cs27-meeting-wizard-form #divMeetingMain .input-group-append{align-items:stretch!important;align-self:stretch!important} .cs27-meeting-wizard-form #divMeetingMain .input-group-prepend>.input-group-text,.cs27-meeting-wizard-form #divMeetingMain .input-group-append>.input-group-text{display:flex!important;align-items:center!important;height:auto!important;min-height:0!important;line-height:1!important} /* LA ALINEACION DE «CONDICIONES Y PRECIOS». Los bloques que viven en la tarjeta son de tres clases distintas -`form-group`, `col-md-12 cs247-block`, `col-md-6`- y solo el primero tenia el padding a cero: los demas entraban 8 px, y uno de ellos ademas a media anchura. De ahi «unos mas a la izquierda que otros». La rejilla ya pone la separacion; los hijos no tienen que poner ninguna. */ /* 2.8.43.265 - `:not(.cs265-caja)`. Esta regla se escribio para bloques heredados que traian el relleno de Bootstrap, y tres entregas despues se comia el de todo lo nuevo que se metiera en la tarjeta: los dos avisos de la .264 salian con `padding: 0px` medido. Un bloque que trae su propia caja lo dice con `cs265-caja` y esta regla lo deja en paz. */ .cs27-meeting-wizard-page .cs2725-meeting-block__body>*:not(.cs265-caja){width:auto!important;max-width:none!important;margin:0!important;padding:0!important} /* Y TAMBIEN LO DE DENTRO. Dos de esos bloques -«Comentarios» y la nota del precio- traen su propia `.row` con columnas, y ahi el margen negativo de la fila y el relleno de la columna no se compensaban: sus etiquetas salian 8 px a la derecha de todas las demas. Se midio en el render. */ .cs27-meeting-wizard-page .cs2725-meeting-block__body .row{margin-left:0!important;margin-right:0!important} .cs27-meeting-wizard-page .cs2725-meeting-block__body .row>[class*="col-"]{padding-left:0!important;padding-right:0!important} /* LA NOTA DE QUIEN COBRA LA ENTRADA: era un `small` gris al final y dice lo unico que hay que entender de esta pantalla. */ .cs261-owner-note{display:flex;align-items:flex-start;gap:11px;margin:0;padding:14px 16px;border:1px solid #e6dde0;border-left:3px solid #c90035;border-radius:12px;background:#fcf9fa;color:#4e4750;font-size:14px;line-height:1.55} .cs261-owner-note>i{margin-top:2px;color:#c90035;font-size:16px} .cs261-owner-note b{display:block;margin-bottom:3px;color:#2f2a33;font-family:gilroy-semibold,Arial,sans-serif;font-size:14px} /* LA NOTA DEL PASO 2, a lo ancho y legible: es lo unico que explica que implica cada modalidad. */ .cs2758-access-note{width:100%!important;margin:22px 0 4px!important;padding:18px 20px!important;gap:14px!important} .cs2758-access-note__badge{padding:7px 15px!important;font-size:13px!important} .cs2758-access-note p{font-size:15px!important;line-height:1.55!important} @media(max-width:760px){ .cs27-meeting-wizard-form>.modal-body{padding:18px 16px!important} .cs27-meeting-wizard-page:not(.is-ready) .cs27-meeting-wizard-form{min-height:340px} } /* --------------------------------------------------------------------------------------------- 2.8.43.262 - EL PASO 4, QUE ERA UNA CUENTA. Al elegir Classicspark caian una detras de otra, sin titulo y sin borde, siete cosas distintas: la frase de bienvenida, el tope, los niveles con su precio, quien ve el directo, la retransmision, dos listas y el cobro. Eudes, 13/09/2026: «la veo como cuenta, sin orden a nivel de diseño». Se parten en DOS tarjetas -las mismas del paso 3, para que el asistente se lea igual de arriba a abajo- y la segunda dice por su nombre que ahi va lo que cobra Classicspark. Lo mismo con YouTube y con Zoom, que tambien soltaban su contenido debajo de las tarjetas. --------------------------------------------------------------------------------------------- */ .cs27-meeting-wizard-page .cs262-stream-block{margin-top:16px} .cs27-meeting-wizard-page .cs262-stream-block:first-child{margin-top:0} /* Una columna: aqui no hay pares de campos, hay bloques que se leen en orden. */ .cs27-meeting-wizard-page .cs262-stream-block .cs2725-meeting-block__body{grid-template-columns:minmax(0,1fr)!important;gap:16px} /* Y la caja de «lo que tendras» deja de ser una caja: la tarjeta ya lo es. Dos bordes concentricos con 12 px entre ellos es el mismo ruido que la linea gruesa de la app en la .209. */ .cs27-meeting-wizard-page .cs262-stream-block .cs-broadcast-included{margin:0!important;padding:0!important;border:0!important;background:none!important} .cs27-meeting-wizard-page .cs262-stream-block .txt-stream{margin:0;color:#4e4750;font-size:14px;line-height:1.55} /* EL PRECIO, COMO UN PRECIO. Iba a 13 px y con el mismo color que el resto, en la pantalla donde se decide cuanto se paga: «no parece un banner donde se muestra un precio». */ .cs27-meeting-wizard-page .cs244-tiers__title{font-size:13px} .cs27-meeting-wizard-page .cs244-tier{padding:15px 17px} .cs27-meeting-wizard-page .cs244-tier__body b{font-size:16px} .cs27-meeting-wizard-page .cs244-tier__price{color:#a10f36;font:700 21px/1.15 gilroy-semibold,Arial,sans-serif} .cs27-meeting-wizard-page .cs244-tier:has(input:checked) .cs244-tier__price{color:#8f0d30} /* El campo con su etiqueta, en YouTube y en Zoom: el nombre vivia dentro del prefijo del input. */ .cs27-meeting-wizard-page .cs262-field label{display:block;margin-bottom:7px!important} .cs27-meeting-wizard-page .cs262-field .channel-youtube{margin-top:7px} /* Y la linea del precio deja de ser una barra verde de «todo bien»: en la tarjeta que se llama «lo que cuesta», la cifra es el contenido, no un aviso de exito. */ .cs27-meeting-wizard-page .cs262-stream-block .cs-broadcast-included__free{grid-column:1/-1;margin:4px 0 0!important;padding:15px 17px!important;border:1px solid #f0c8d3!important;border-radius:13px!important;background:linear-gradient(180deg,#fff5f8,#fff)!important;color:#8f0d30!important;font:700 17px/1.35 gilroy-semibold,Arial,sans-serif!important} .cs27-meeting-wizard-page .cs262-stream-block .cs260-broadcast-when{margin-top:10px} /* --------------------------------------------------------------------------------------------- 2.8.43.263 - LA CABECERA DEL PASO 4 EN DOS MITADES, Y EL PRECIO A LA DERECHA. La bienvenida y el tope ocupaban una fila entera cada una para decir dos frases, y «Quién puede ver el directo» quedaba abajo del todo con media pantalla vacía al lado. Eudes, 13/09/2026. --------------------------------------------------------------------------------------------- */ /* 2.8.43.264 - La cabecera en dos mitades de la .263 dura una entrega: el acceso pasa a ocupar la fila entera con sus tres tarjetas, y las frases sueltas se juntan en un aviso debajo del nivel. */ .cs27-meeting-wizard-page .cs-broadcast-access{margin:0} /* El precio vive ahora DENTRO de la columna de la derecha, debajo de la lista corta: ahi es donde sobraba sitio. Deja de ser una banda a lo ancho, asi que ya no necesita cruzar la rejilla. */ .cs27-meeting-wizard-page .cs262-stream-block .cs245-wide__col>.cs-broadcast-included__free{grid-column:auto;margin:12px 0 0!important} .cs27-meeting-wizard-page .cs262-stream-block .cs245-wide__col>.cs260-broadcast-when{margin:9px 0 0} /* EL ÓVALO DEL ICONO. Nada de lo que se instala aqui lo dibuja -se comprobo rule por rule con el navegador-, asi que si sale es de fuera: un `label` o un `img` con borde heredado, o el radio nativo estirado. Se apagan los tres, que no cuesta nada y no toca el comportamiento: la tarjeta ya se distingue por su borde y su fondo, que es lo que Eudes dijo. */ .cs27-meeting-wizard-page #divMeetingStreaming [id$="Label"] label, .cs27-meeting-wizard-page #divMeetingStreaming [id$="Label"] img{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;outline:0!important} .cs27-meeting-wizard-page #divMeetingStreaming input[type="radio"]{appearance:none!important;-webkit-appearance:none!important;width:1px!important;height:1px!important;border:0!important;background:none!important} /* --------------------------------------------------------------------------------------------- 2.8.43.264 - EL ACCESO EN TRES TARJETAS, EL AVISO UNICO Y LA RETRANSMISION CON SU SECCION. --------------------------------------------------------------------------------------------- */ .cs27-meeting-wizard-page .cs264-access .cs-broadcast-access__title{display:block;margin-bottom:9px;color:#443d43;font:600 13px/1.4 gilroy-semibold,Arial,sans-serif} .cs27-meeting-wizard-page .cs264-access__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px} .cs27-meeting-wizard-page .cs264-access__card{box-sizing:border-box;display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px 11px;align-items:start;margin:0;padding:14px 16px;border:1px solid #eadfe2;border-radius:12px;background:#fff;cursor:pointer} .cs27-meeting-wizard-page .cs264-access__card input{position:absolute;opacity:0;pointer-events:none} .cs27-meeting-wizard-page .cs264-access__mark{display:grid;place-items:center;grid-column:1;grid-row:1;width:20px;height:20px;border:1px solid #d9c8ce;border-radius:50%;color:transparent;font-size:10px} .cs27-meeting-wizard-page .cs264-access__body{grid-column:2;min-width:0} .cs27-meeting-wizard-page .cs264-access__body b{display:block;color:#3a333e;font:700 15px/1.3 gilroy-semibold,Arial,sans-serif} .cs27-meeting-wizard-page .cs264-access__body small{display:block;margin-top:4px;color:#6b6470;font:13px/1.5 gilroy-regular,Arial,sans-serif} .cs27-meeting-wizard-page .cs264-access__card:has(input:checked){border-color:#b3123c;background:#fdf3f5} .cs27-meeting-wizard-page .cs264-access__card:has(input:checked) .cs264-access__mark{border-color:#b3123c;background:#b3123c;color:#fff} .cs27-meeting-wizard-page .cs264-access__card:has(input:focus-visible){outline:2px solid #b3123c;outline-offset:2px} /* EL AVISO UNICO: las tres frases que estaban repartidas por la tarjeta, juntas y a lo ancho. */ .cs27-meeting-wizard-page .cs264-stream-note{box-sizing:border-box;display:grid;gap:8px;margin-top:2px;padding:15px 17px;border:1px solid #eee2e6;border-radius:13px;background:#fbf7f8} .cs27-meeting-wizard-page .cs264-stream-note .txt-stream{margin:0;color:#3a333e;font:600 14px/1.45 gilroy-semibold,Arial,sans-serif} .cs27-meeting-wizard-page .cs264-stream-note .cs245-cap,.cs27-meeting-wizard-page .cs264-stream-note .cs244-tiers__help{margin:0} /* LA RETRANSMISION QUE NO ESTA EN ESTE NIVEL: se ve, y se ve por que no se puede usar. */ .cs27-meeting-wizard-page .cs264-simul-no{box-sizing:border-box;display:grid;gap:9px;justify-items:start;padding:17px 19px;border:1px dashed #e3ccd3;border-radius:13px;background:#fdfafb} .cs27-meeting-wizard-page .cs264-simul-no__badge{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;background:#f3e6ea;color:#8f0d30;font:700 15px/1.25 gilroy-semibold,Arial,sans-serif} .cs27-meeting-wizard-page .cs264-simul-no p{margin:0;color:#5b5460;font:14px/1.55 gilroy-regular,Arial,sans-serif} .cs27-meeting-wizard-page .cs262-stream-block #divMeetingSimulcast{padding:0!important} @media(max-width:760px){.cs27-meeting-wizard-page .cs264-access__list{grid-template-columns:minmax(0,1fr)}} /* --------------------------------------------------------------------------------------------- 2.8.43.265 - LO QUE ROMPI EN LA .264, Y UNA REGLA QUE LLEVABA ROTO DESDE LA .244. Eudes, 13/09/2026, probando la .264: «el badge no tiene padding interno y los textos se pegan de los bordes», «arriba de "Quién puede ver el directo" hay una línea que no entiendo», «los botones tienen un radiobutton como pegado del texto». LAS TRES SALEN DE LO MISMO: una regla con MAS FUERZA de la que hace falta. - El relleno se lo comia `.cs2725-meeting-block__body>*{padding:0!important}` de la .261. Arriba queda excluido lo que trae su propia caja. - La raya viene de `.cs-broadcast-access{padding-top:14px;border-top}` de la .239, de cuando esto era un desplegable pegado al bloque anterior. Con las tarjetas ya no separa nada. - Y el radio: `#cs27MeetingWizardPage label{display:block!important}` -.2725, un ID CON `!important`- le gana a `.cs264-access__card{display:grid}` y a `.cs244-tier{display:flex}`, que son solo clases. La marca y el texto caian uno DEBAJO del otro. Medido: marca en x=397 y=196, titulo en x=397 y=216. En la ventana de EDITAR no pasaba -su envoltorio es `#csEventEditPage`-, y por eso lleva desde la .244 sin verse. La respuesta no es subir otro `!important` a ciegas: es igualar la especificidad en lo que de verdad hace falta -el `display`- y dejar el resto donde estaba. --------------------------------------------------------------------------------------------- */ #cs27MeetingWizardPage .cs264-access{margin:0;padding-top:0;border-top:0} #cs27MeetingWizardPage .cs264-access__card{display:grid!important;margin:0!important;gap:5px 13px} #cs27MeetingWizardPage .cs244-tier{display:flex!important;margin:0!important;gap:14px} /* La marca, a la altura de la primera linea del titulo y no del bloque entero. */ #cs27MeetingWizardPage .cs264-access__mark{margin-top:1px} .cs27-meeting-wizard-page .cs264-stream-note,.cs27-meeting-wizard-page .cs264-simul-no{margin:0} @media(max-width:980px){.cs27-meeting-wizard-page .cs264-access__list{grid-template-columns:minmax(0,1fr)}} /* --------------------------------------------------------------------------------------------- 2.8.43.266 - EL PASO 6, QUE ERA EL ULTIMO SIN TARJETAS. Eudes, 13/09/2026: «los campos pegados». Y lo estaban de verdad: medido en Chromium, 0 px entre un bloque y el siguiente. La regla que los separaba -`.cs2722-meeting-invitations .form-group {margin-bottom:24px!important}`- y la que los pega -`.cs27-meeting-wizard-page .form-group {margin:0!important}`- tienen la MISMA especificidad, y gana la segunda por ir despues en la cabecera. Otra vez lo mismo. La respuesta no es un `!important` mas: es que estos bloques vivan en una tarjeta, como los del paso 3, el 4 y el 5, y que la separacion la ponga la rejilla, que no compite con nadie. --------------------------------------------------------------------------------------------- */ .cs27-meeting-wizard-page .cs266-invite-card .cs2725-meeting-block__body{grid-template-columns:minmax(0,1fr)!important;gap:22px} .cs27-meeting-wizard-page .cs266-invite-card .row{display:block!important;margin:0!important} .cs27-meeting-wizard-page .cs266-invite-card .row>[class*="col-"]{width:100%!important;max-width:none!important;flex:none!important;padding:0!important} .cs27-meeting-wizard-page .cs266-invite-card label{margin:0 0 7px!important} .cs27-meeting-wizard-page .cs266-invite-card .d-flex.justify-content-between{align-items:center;gap:14px;margin-bottom:7px} .cs27-meeting-wizard-page .cs266-invite-card .d-flex.justify-content-between label{margin:0!important} .cs27-meeting-wizard-page .cs266-invite-card textarea.form-control{min-height:210px!important} .cs27-meeting-wizard-page .cs266-invite-card small{display:block;margin-top:6px;color:#756e74;font:13px/1.5 gilroy-regular,Arial,sans-serif} /* El estado vacio honesto de «Invitar a mis amigos»: no es un fallo de busqueda, es que todavia no hay a quien invitar, y lo que hay que hacer es otra cosa -invitar por correo, aqui debajo-. */ .cs27-meeting-wizard-page .cs266-empty{display:grid;grid-template-columns:22px minmax(0,1fr);gap:3px 12px;margin:0;padding:15px 17px;border:1px dashed #e3d4d9;border-radius:13px;background:#fcf9fa} .cs27-meeting-wizard-page .cs266-empty>i{grid-row:1/3;align-self:start;margin-top:2px;color:#c90035;font-size:17px} .cs27-meeting-wizard-page .cs266-empty b{color:#3a333e;font:600 14px/1.4 gilroy-semibold,Arial,sans-serif} .cs27-meeting-wizard-page .cs266-empty small{margin:0!important;color:#6b6470;font:13px/1.5 gilroy-regular,Arial,sans-serif} /* 2.8.43.266 - EL HUECO DE LA IMAGEN, CON LA FORMA QUE VA A TENER. El recuadro era un rectangulo de 340 px de alto y la imagen entraba con `object-fit:contain`: una foto cuadrada salia centrada en una caja ancha, y de ahi «sigo viendo una imagen horizontal». Ahora la caja ES 16:9 -lo que se va a ver- asi que lo que se ensena antes de recortar y lo que queda despues son la misma forma. */ .cs27-meeting-wizard-page .cs27-meeting-image-dropzone{aspect-ratio:16/9;min-height:0!important;max-height:420px} .cs27-meeting-wizard-page .cs27-meeting-image-dropzone img{max-height:100%!important;max-width:100%} @media(max-width:760px){.cs27-meeting-wizard-page .cs27-meeting-image-dropzone{aspect-ratio:16/10}} /* 2.8.43.267 - La tarjeta «Presencial» apagada cuando el evento lo gestiona Classicspark. Apagada, no escondida: quien la vio ayer tiene que encontrarla y leer por que hoy no se puede. */ .cs27-meeting-wizard-page .modal-cp-encuentros--box.cs267-no-disponible{opacity:.5;cursor:not-allowed;background:#faf7f8!important;border-color:#e7dfe1!important;box-shadow:none!important} .cs27-meeting-wizard-page .modal-cp-encuentros--box.cs267-no-disponible:after{content:none!important} .cs27-meeting-wizard-page .cs267-opcional{margin-left:7px;padding:2px 8px;border-radius:999px;background:#f1ecee;color:#6b6470;font:600 11px/1.4 gilroy-semibold,Arial,sans-serif;vertical-align:middle} /* --------------------------------------------------------------------------------------------- 2.8.43.269 - SEIS COSAS QUE EUDES ENCONTRO PROBANDO LA .268. --------------------------------------------------------------------------------------------- */ /* 1. LAS TARJETAS DEL PASO 1 NO CAMBIAN DE FORMA AL ELEGIRLAS. «Cuando los selecciono se muestran los botones con una organización distinta a cuando no están seleccionados; lo ideal sería que se vieran como cuando se seleccionan, con el radio button alineado a la derecha inactivo antes de seleccionar.» La marca la ponia `:after` SOLO en `.is-selected`, asi que al elegir aparecia un circulo de 25 px con `margin-left:auto` y todo lo demas se recolocaba. Ahora la marca existe siempre -apagada- y elegir solo la enciende: no se mueve nada. */ .cs2746-choice-section .modal-cp-encuentros--box:after{content:'';width:25px;height:25px;margin-left:auto;border:1px solid #ded5d8;border-radius:50%;display:grid;place-items:center;flex:0 0 25px;background:#fff;color:transparent;font:12px Arial,sans-serif} .cs2746-choice-section .modal-cp-encuentros--box.is-selected:after{content:'✓';border-color:#c90035;background:#c90035;color:#fff} .cs2746-choice-section .modal-cp-encuentros--box.cs267-no-disponible:after{border-style:dashed;background:#f6f2f3} /* 2. LA MARCA DE ERROR, CON LA FORMA DEL CAMPO. En un `select` con select2 el anillo caia sobre el contenedor -un `span` sin borde- y salia un cuadrado grueso alrededor. Ahora va en la caja que se ve, con su mismo radio. */ .cs27-meeting-wizard-page .select2-container.cs2722-invalid{box-shadow:none!important} .cs27-meeting-wizard-page .select2-selection.cs2722-invalid{border-color:#c90035!important;box-shadow:0 0 0 3px rgba(201,0,53,.12)!important;border-radius:10px!important} /* 3. «INVITAR A TODAS»: SE VE APAGADO Y NO RECIBE CLICS. */ .cs27-meeting-wizard-page .select2-container.cs269-bloqueado{opacity:.55;pointer-events:none} .cs27-meeting-wizard-page .select2-container.cs269-bloqueado .select2-selection{background:#f6f3f4!important;border-style:dashed!important} /* 4. EL PASO 3: los dos campos del cobro, cada uno con su etiqueta y su aire. */ .cs27-meeting-wizard-page .cs269-field{display:block} .cs27-meeting-wizard-page .cs269-field+.cs269-field{margin-top:16px} .cs27-meeting-wizard-page .cs269-field>label{display:block;margin:0 0 7px!important} .cs27-meeting-wizard-page .cs247-block__title{display:block;margin:0 0 11px!important;color:#3a333e;font:600 14px/1.4 gilroy-semibold,Arial,sans-serif} /* 5. EL PASO 5: la vista previa, que ya no es el recortador. */ .cs27-meeting-wizard-page .cs269-foto{box-sizing:border-box;overflow:hidden;display:grid;place-items:center;aspect-ratio:16/9;max-height:420px;border:2px dashed #e7bdc8;border-radius:20px;background:#fff9fa} .cs27-meeting-wizard-page .cs269-foto.is-dragging{border-color:#ca0033;background:#fff0f3} .cs27-meeting-wizard-page .cs269-foto img{width:100%;height:100%;object-fit:cover;display:block} .cs27-meeting-wizard-page .cs269-foto__vacio{display:grid;justify-items:center;gap:9px;padding:20px;color:#8a8189;font:14px/1.5 gilroy-regular,Arial,sans-serif;text-align:center} .cs27-meeting-wizard-page .cs269-foto__vacio i{color:#d7a9b6;font-size:34px} .cs27-meeting-wizard-page .cs269-foto__acciones{display:flex;justify-content:center;gap:11px;flex-wrap:wrap;margin-top:14px} .cs27-meeting-wizard-page .cs269-foto__btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 19px;border:1px solid #c90035;border-radius:12px;background:#c90035;color:#fff;font:600 14px/1 gilroy-semibold,Arial,sans-serif;cursor:pointer} .cs27-meeting-wizard-page .cs269-foto__btn--ghost{border-color:#e7c4cc;background:#fff;color:#b90032} .cs27-meeting-wizard-page .cs269-foto__btn[hidden]{display:none!important} /* 6. EL MODAL DEL RECORTE. Propio, para no depender del hueco de la pagina. */ .cs269-modal{position:fixed;inset:0;z-index:20050;display:grid;place-items:center;padding:20px;background:rgba(32,22,27,.62)} .cs269-modal[hidden]{display:none!important} .cs269-modal__caja{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(860px,100%);max-height:calc(100vh - 40px);overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.3)} .cs269-modal__cabecera{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid #eee7e9} .cs269-modal__cabecera strong{display:block;color:#2f2a33;font:17px gilroy-semibold,Arial,sans-serif} .cs269-modal__cabecera small{display:block;margin-top:3px;color:#817980;font:13px/1.45 gilroy-regular,Arial,sans-serif} .cs269-modal__cerrar{border:0;background:none;color:#8a8189;font-size:27px;line-height:1;cursor:pointer} /* El cuerpo manda el alto: sin esto, una foto alta empuja el pie fuera de la ventana y los botones se quedan abajo, sin verse. `Cropper` toma el tamaño de la imagen AL MONTARSE, asi que el limite tiene que estar puesto antes -de ahi el `max-height` sobre la propia imagen-. */ .cs269-modal__cuerpo{overflow:hidden;display:grid;place-items:center;height:min(58vh,520px);padding:16px 20px;background:#faf7f8} .cs269-modal__cuerpo img{display:block;max-width:100%;max-height:min(58vh,520px)} .cs269-modal__cuerpo .cropper-container{max-width:100%!important;max-height:100%!important} .cs269-modal__pie{display:flex;justify-content:flex-end;gap:11px;padding:16px 22px;border-top:1px solid #eee7e9} .cs269-modal__pie .btn{min-height:44px;padding:10px 20px;border-radius:11px;font:600 14px/1.2 gilroy-semibold,Arial,sans-serif} body.cs269-modal-abierto{overflow:hidden} @media(max-width:700px){.cs269-modal__caja{width:100%}.cs269-modal__cuerpo{padding:12px}} /* ============================================================================ 2.8.43.270 - LA BANDA ROSADA DEL PASO 5. Eudes, 13/09/2026: «en el paso 5 el boton "Seleccionar imagen" tiene como un fondo rosado en su contenedor que ocupa toda la linea». Es herencia, y de las que se ven venir. En el recortador de 2021 `#divCropImage` ERA el boton: una etiqueta ancha, rosada y roja que ocupaba la linea entera, y `classicspark-space.css` le puso ese aspecto a medida. En la .269 ese id paso a ser un CONTENEDOR con dos botones propios dentro, pero el fondo se quedo: una banda rosada de 45 px de alto detras de unos botones que ya tienen su color. La regla de la que viene es `.cs27-meeting-wizard-form #divCropImage` -un id y una clase-, asi que aqui se repite el mismo peso y gana por orden de hoja: este fichero se carga despues. No se toca la regla original: el mismo selector lo usan el avatar, el escaparate y la portada, donde `#divCropImage` SIGUE siendo el boton ancho y tiene que seguir viendose asi. */ .cs27-meeting-wizard-form #divCropImage, .cs27-meeting-wizard-page #divCropImage{min-height:0;border-radius:0;background:none;color:inherit} /* ============================================================================ 2.8.43.271 - EL SELECTOR DE PLATAFORMA, DENTRO DE SU TARJETA. Las tres opciones vivian en `#divMeetingStreaming>.form-group:nth-child(2)>.d-flex`, es decir ancladas al PUESTO que ocupaba el bloque. Al meterlas en una `section` como el resto del paso 4, ese puesto cambia y la regla deja de encajar -y con ella el recuadro de cada opcion-. Aqui se vuelve a decir lo mismo sobre una clase propia, que no depende de que haya delante. */ /* A lo ancho, como las demas. `#divMeetingStreaming` es un `.row` de Bootstrap -un flex-, y sus hijos de siempre llevaban `col-md-12` con un `width:100%!important` puesto en la .2725. La `section` no lleva clase de columna, asi que sin esto se encoge al tamaño de su contenido: una tarjeta de 456 px al lado de otra de 1180. Se vio en la captura, no en los numeros. */ .cs27-meeting-wizard-page #cs271Plataforma{width:100%} .cs27-meeting-wizard-page .cs271-plataforma__opciones{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:12px;align-items:stretch} .cs27-meeting-wizard-page .cs271-plataforma__opciones>div{min-height:132px;padding:12px;border:1px solid #e3dadd;border-radius:14px;background:#fff;text-align:center} @media(max-width:760px){.cs27-meeting-wizard-page .cs271-plataforma__opciones{grid-template-columns:1fr}} /* ============================================================================ 2.8.43.273 - EL BOTON DEL PASO 7, CENTRADO POR DENTRO. Eudes, 13/09/2026: «el botón "Ver mi evento" sale con el texto descuadrado en su propio entorno tanto interno como externo». Medido: el botón es una caja de 200x43 y el texto caía a 19 px del borde izquierdo y a 100 del derecho, y a 9 px de arriba y 17 de abajo. La causa es de manual: alguien lo pasó a `display:flex` sin decirle qué hacer con lo de dentro, y un contenedor flex ignora `text-align` para colocar sus elementos — el texto se convierte en un elemento anónimo pegado al inicio de los dos ejes. Y de ahí viene también lo «externo»: la caja SÍ estaba centrada en su fila -medido, 423 px contra 423-, pero lo que se ve es el texto, y el texto estaba a la izquierda de su propia caja. Centrarlo por dentro arregla las dos cosas; el ancho pasa a ser el del contenido, con un mínimo, para que la caja tampoco sobre por los lados. */ /* Y SOLO EL DE «VER MI EVENTO». La primera version de esta regla decia `.modal-footer .btn`, que tambien encaja con el boton de compartir — y ese esta escondido con `display:none` en esta pantalla, asi que `display:inline-flex` se lo volvia a encender. Lo cazo el banco en la misma pasada: «2 visible(s)» donde tenia que haber uno. */ .cs27-meeting-wizard-form #divMeetingFinish .modal-footer #btnMeetingGo{ display:inline-flex;align-items:center;justify-content:center;gap:8px; width:auto;min-width:190px;min-height:46px;padding:10px 22px;text-align:center}