/* ============================================================= ARTROCELL · personalización del agendamiento de Reservo Versión oscura. Pegar en el campo de CSS personalizado del panel de Reservo. La idea: en vez de maquillar una tarjeta blanca para que moleste menos sobre el fondo oscuro, se elimina la tarjeta. El fondo del widget pasa a transparente, así que lo que se ve detrás del formulario es la propia sección de la landing —con su trama diagonal incluida, que cruza el iframe sin cortarse. De paso desaparece el problema del alto fijo: los 364px que sobraban en el paso 1 ya no son un vacío blanco, son fondo. Todo cuelga de #body-base porque varias reglas de Reservo usan dos clases con !important y una regla de una sola clase pierde por especificidad aunque vaya después. El id del vale más que cualquier cantidad de clases, y además es ancestro del desplegable, que Reservo monta fuera del wizard. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Lora:wght@600;700&display=swap'); :root{ --ac-ink:rgba(255,255,255,.92); /* texto principal */ --ac-muted:rgba(255,255,255,.55); /* texto secundario */ --ac-line:rgba(255,255,255,.17); /* hairline sobre oscuro */ --ac-soft:rgba(255,255,255,.05); /* relleno apenas perceptible */ --ac-accent:#6FB6C0; /* verde azulado claro, para leer sobre oscuro */ --ac-fill:#1F6B78; /* verde azulado de marca, para rellenos */ --ac-panel:#16262D; /* fondo de capas flotantes */ } /* ---------- 1. Fondo oscuro propio -------------------------- PARCHE. Antes esto era transparente, para que el widget se fundiera con la seccion de la landing. Funcionaba dentro del iframe, pero rompia el link directo: quien abre la agenda fuera de la pagina -o la previsualizacion del panel de Reservo- no tiene nada oscuro detras, y el texto blanco queda sobre blanco. Ilegible. Mientras tanto la pagina pinta su propio fondo, el mismo color de la seccion donde va incrustada. Dentro del iframe el empalme sigue siendo invisible porque es el mismo color; lo unico que se pierde es la trama diagonal del fondo, que va al 3% de blanco y no se nota. Fuera del iframe, ahora se lee. La solucion de fondo es que el widget sepa si esta incrustado, y eso no se puede resolver solo con CSS. */ html{ background:#101D23 !important; } #body-base{ background:#101D23 !important; font-family:'Inter', system-ui, -apple-system, sans-serif !important; color:var(--ac-ink) !important; min-height:100vh; } #body-base .font-sans{ font-family:'Inter', system-ui, -apple-system, sans-serif !important; } /* Dejar el transparente no basta: Reservo pinta de blanco tambien el contenedor principal (#plus) y el pie de botones, y Tailwind pinta por clase con .bg-white. Cualquiera de esos que quede opaco devuelve el rectangulo blanco entero. */ #body-base #plus, #body-base .content, #body-base .clearfix, #body-base .wizard-navigation, #body-base .wizard-tab-content, #body-base .wizard-card-footer, #body-base .vld-background, #body-base .bg-white, #body-base .wizard-tab-container{ background:transparent !important; background-color:transparent !important; border:0 !important; box-shadow:none !important; } #body-base .wizard-tab-container{ border-radius:0 !important; max-width:100% !important; padding-left:16px !important; padding-right:16px !important; } @media (min-width:640px){ #body-base .wizard-tab-container{ padding-left:24px !important; padding-right:24px !important; } } /* Grises de Tailwind que sobre fondo oscuro quedan ilegibles */ #body-base .text-gray-600, #body-base .text-gray-700, #body-base .text-gray-800{ color:var(--ac-ink) !important; } #body-base .text-gray-400, #body-base .text-gray-500{ color:var(--ac-muted) !important; } /* ---------- 2. Los cuatro pasos ---------------------------- */ #body-base .wizard-progress-with-circle{ background-color:var(--ac-line) !important; height:2px !important; } #body-base .wizard-progress-bar{ background-color:var(--ac-accent) !important; height:2px !important; } #body-base .wizard-icon-circle{ border-color:var(--ac-line) !important; background:transparent !important; color:var(--ac-muted) !important; } #body-base .wizard-icon-circle.checked{ border-color:var(--ac-fill) !important; background:var(--ac-fill) !important; } #body-base .wizard-icon-circle.checked .wizard-icon, #body-base .wizard-icon-circle.checked .wizard-icon-container{ color:#fff !important; background:transparent !important; } /* Las cifras en la serif de los títulos: el mismo recurso que usan los números de paso y los datos del hero en la landing. */ #body-base .wizard-icon{ font-family:'Lora', Georgia, serif !important; font-style:normal !important; font-weight:700 !important; } #body-base .stepTitle{ font-size:10.5px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:var(--ac-muted) !important; } #body-base .stepTitle.active{ color:#fff !important; } /* ---------- 3. Campos -------------------------------------- */ #body-base .nq-field__control--outlined{ border-radius:10px !important; background:var(--ac-soft) !important; } #body-base .nq-field__control--outlined:not(.nq-field__control--focused){ border-color:var(--ac-line) !important; } #body-base .nq-field__control--focused{ border-color:var(--ac-accent) !important; box-shadow:0 0 0 3px rgba(111,182,192,.16) !important; } #body-base .nq-field__label{ color:var(--ac-muted) !important; } #body-base .nq-field__control--focused .nq-field__label{ color:var(--ac-accent) !important; } #body-base .nq-field__native{ color:var(--ac-ink) !important; background:transparent !important; } #body-base .nq-field__native::placeholder{ color:rgba(255,255,255,.38) !important; } #body-base .nq-field__side svg{ color:var(--ac-muted) !important; } /* El autorrelleno del navegador pinta el campo de blanco */ #body-base input:-webkit-autofill{ -webkit-text-fill-color:var(--ac-ink) !important; -webkit-box-shadow:0 0 0 100px #1B2C33 inset !important; caret-color:var(--ac-ink) !important; } /* Desplegable. Flota sobre la página y Reservo lo monta colgando del , fuera del wizard: necesita fondo propio, porque si fuera transparente se leería encima del formulario. */ #body-base .nqs-menu{ background:var(--ac-panel) !important; border:1px solid var(--ac-line) !important; border-radius:10px !important; box-shadow:0 22px 48px -20px rgba(0,0,0,.75) !important; overflow:hidden !important; } #body-base .nqs-option{ color:var(--ac-ink) !important; background:transparent !important; } #body-base .nqs-option:hover, #body-base .nqs-option--active{ background:rgba(255,255,255,.07) !important; color:var(--ac-accent) !important; } /* ---------- 4. Calendario ---------------------------------- */ #body-base .custom-calendar-day-slot{ border-radius:10px !important; color:var(--ac-ink) !important; } #body-base .custom-hover:hover{ background:rgba(255,255,255,.07) !important; color:var(--ac-accent) !important; } #body-base .custom-selected-day, #body-base .custom-selected-day *{ background:var(--ac-fill) !important; color:#fff !important; } #body-base .carousel__prev, #body-base .carousel__next{ color:var(--ac-accent) !important; background:transparent !important; } #body-base .carousel__prev--disabled, #body-base .carousel__next--disabled{ opacity:.25 !important; } /* Bloques de hora */ #body-base .custom-timeslot-border{ background:transparent !important; border:1px solid var(--ac-line) !important; border-radius:999px !important; color:var(--ac-ink) !important; font-size:14px !important; transition:border-color .18s ease, color .18s ease, background .18s ease; } #body-base .custom-timeslot-border:hover{ border-color:var(--ac-accent) !important; color:var(--ac-accent) !important; } #body-base .custom-selected-calendar-timeslot, #body-base .custom-selected-calendar-timeslot:hover{ background:var(--ac-fill) !important; border-color:var(--ac-fill) !important; color:#fff !important; } /* Aviso de día sin cupos */ #body-base .bg-gray-100{ background:var(--ac-soft) !important; color:var(--ac-muted) !important; border:1px solid var(--ac-line) !important; border-radius:10px !important; font-weight:600 !important; } /* ---------- 5. Botones ------------------------------------- El primario repite el degradado del botón de la landing, para que el paso final se sienta del mismo material que el resto. */ #body-base .btn.primary-custom-color{ background:linear-gradient(145deg,#4E9AA6 0%,#1F6B78 55%,#14505A 100%) !important; border:0 !important; color:#fff !important; border-radius:999px !important; padding:13px 22px !important; font-size:14px !important; font-weight:600 !important; letter-spacing:-.005em !important; box-shadow:0 14px 34px -16px rgba(31,107,120,.75) !important; transition:transform .25s ease, box-shadow .25s ease; } #body-base .btn.primary-custom-color:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -16px rgba(31,107,120,.9) !important; } /* El botón Volver aparece recién en el paso 2 */ #body-base .btn.secondary-custom-color{ background:transparent !important; border:1px solid var(--ac-line) !important; color:var(--ac-muted) !important; border-radius:999px !important; padding:13px 22px !important; font-size:14px !important; font-weight:600 !important; box-shadow:none !important; } #body-base .btn.secondary-custom-color:hover{ border-color:rgba(255,255,255,.45) !important; color:#fff !important; } #body-base button.otro_rut{ color:var(--ac-accent) !important; text-decoration:underline !important; font-weight:600 !important; } /* ---------- 6. Aire ----------------------------------------- El paso de datos personales es el más alto y es el que fija el alto del iframe en la landing. Apretando el interlineado de los campos baja lo suficiente como para recortar el marco. */ #body-base form .form-group{ margin-bottom:6px !important; } #body-base form .space-y-2 > * + *{ margin-top:6px !important; } /* ---------- 7. El pie de botones ---------------------------- Reservo reparte el pie en dos columnas flotadas de ancho fijo, una para Volver y otra para Continuar. En el paso 1 no hay Volver, pero su columna sigue ocupando su mitad, así que el único botón queda 98px a la derecha del centro. La solución es dejar de repartir en columnas: una fila centrada donde cada ranura mide lo que mide su botón. El aire va como margen del botón y no como gap de la fila, porque un gap también cuenta para la ranura vacía y devuelve medio desvío. */ #body-base .wizard-card-footer{ margin-top:14px !important; display:flex !important; justify-content:center !important; align-items:center !important; flex-wrap:wrap !important; gap:0 !important; } #body-base .wizard-footer-left, #body-base .wizard-footer-right{ float:none !important; width:auto !important; flex:0 0 auto !important; margin:0 !important; padding:0 !important; } #body-base .wizard-footer-left > span, #body-base .wizard-footer-right > span{ display:block !important; margin:5px !important; } /* Los botones traen w-full, que dentro de una ranura ajustada al contenido se muerde la cola. Un ancho mínimo los sostiene. */ #body-base .btn.primary-custom-color, #body-base .btn.secondary-custom-color{ width:auto !important; min-width:172px !important; } /* El sello de recaptcha, que flota sobre el formulario */ #body-base .grecaptcha-badge{ opacity:.3 !important; } /* ---------- 8. Avisos de validacion ------------------------- Reservo usa SweetAlert para los avisos -"debe seleccionar un profesional"- y vienen en blanco con boton azul de Bootstrap. Sobre el formulario oscuro saltaban como un error del sistema mas que como una indicacion. */ #body-base .swal2-popup{ background:var(--ac-panel) !important; color:var(--ac-ink) !important; border:1px solid var(--ac-line) !important; border-radius:16px !important; } #body-base .swal2-title, #body-base .swal2-html-container, #body-base .swal2-content{ color:var(--ac-ink) !important; font-family:'Inter', system-ui, -apple-system, sans-serif !important; } #body-base .swal2-confirm.swal2-styled, #body-base .swal2-cancel.swal2-styled{ background:linear-gradient(145deg,#4E9AA6 0%,#1F6B78 55%,#14505A 100%) !important; border:0 !important; border-radius:999px !important; padding:11px 24px !important; font-weight:600 !important; box-shadow:none !important; }