/* ========================================================================== Brazos Abiertos — Contact Tracker Estilos del modal de WhatsApp. Esta hoja se inyecta con dentro del shadow root del modal y además se encola normalmente en la página, para que el navegador ya la tenga en caché cuando el modal se arma y no haya destello sin estilos. Dos consecuencias que explican cómo está escrito todo lo que sigue: 1. Dentro del shadow root no llega ninguna regla del tema, así que acá hay que declarar TODO (tipografías, tamaños, colores, cajas). No hace falta pelear especificidad ni usar !important. 2. La herencia sí atraviesa el borde del shadow: el elemento anfitrión hereda del . Por eso :host fija tipografía, tamaño y color de manera explícita, y los controles de formulario los vuelven a fijar (los inputs no heredan la fuente por defecto). Las reglas se escriben sobre `.bact-modal` (y no sólo sobre :host) para que también funcionen si el navegador no soporta y el JS cae al modo de reserva con un
. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Variables — calcadas del kit de Elementor y de WPForms del sitio real -------------------------------------------------------------------------- */ :host, .bact-modal { /* Paleta de marca */ --bact-gold: #CCA776; --bact-gold-dark: #b8925f; --bact-ink: #192735; --bact-body: #5b5b5b; --bact-muted: rgba( 0, 0, 0, .55 ); --bact-bg: #ffffff; --bact-soft: #F4F4F4; --bact-line: rgba( 0, 0, 0, .25 ); --bact-error: #d63637; --bact-ok: #00bb2d; --bact-wa: #25d366; /* Tipografías del sitio. Las @font-face del documento alcanzan al shadow tree, así que Lora / Mukta Vaani / Karla se resuelven igual que afuera. */ --bact-font-title: "Lora", Georgia, "Times New Roman", serif; --bact-font-body: "Mukta Vaani", "Segoe UI", system-ui, -apple-system, sans-serif; --bact-font-accent: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif; --bact-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Campos: los mismos valores que las variables de WPForms en el sitio */ --bact-field-h: 43px; --bact-field-fs: 16px; --bact-field-pad-h: 14px; --bact-field-gap: 15px; --bact-field-text: rgba( 0, 0, 0, .7 ); --bact-placeholder: rgba( 0, 0, 0, .45 ); --bact-label-fs: 16px; --bact-label-color: rgba( 0, 0, 0, .85 ); --bact-sublabel-color: rgba( 0, 0, 0, .55 ); /* Botón: el dorado en píldora del formulario del sitio. La altura sube de los 41px del sitio a 48px porque acá es el único CTA y en mobile tiene que cumplir el mínimo táctil de 44px. */ --bact-btn-fs: 17px; --bact-btn-h: 48px; --bact-radius-field: 8px; --bact-radius-btn: 80px; --bact-radius-dialog: 14px; --bact-focus-ring: 0 0 0 3px rgba( 204, 167, 118, .28 ); --bact-shadow-dialog: 0 18px 50px rgba( 25, 39, 53, .22 ), 0 2px 8px rgba( 25, 39, 53, .10 ); /* Por encima del botón flotante de Click to Chat, que usa 99999999. */ --bact-z: 2147483000; } /* El anfitrión no aporta layout: el diálogo se posiciona por su cuenta. Ojo: las reglas del documento le ganan a :host, así que el JS tiene que usar un elemento anfitrión que ningún selector del tema alcance. */ :host { display: block; color-scheme: light; } :host, .bact-modal { box-sizing: border-box; font-family: var( --bact-font-body ); font-size: 16px; font-weight: 400; line-height: 1.5; color: var( --bact-ink ); text-align: left; letter-spacing: normal; text-transform: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .bact-modal *, .bact-modal *::before, .bact-modal *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- 2. Contenedor raíz — en top layer, o
fijo como reserva -------------------------------------------------------------------------- */ .bact-modal { position: fixed; inset: 0; z-index: var( --bact-z ); display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 20px; border: 0; background: transparent; overflow: hidden; } /* Visibilidad: el la maneja con [open]; el div de reserva, con el atributo hidden que trae de fábrica el marcado del modal. */ .bact-modal[hidden], dialog.bact-modal:not( [open] ) { display: none; } /* El contenedor se enfoca por programa al abrir; no necesita anillo propio. */ .bact-modal:focus, .bact-modal__dialog:focus { outline: none; } /* -------------------------------------------------------------------------- 3. Velo de fondo -------------------------------------------------------------------------- */ /* Los custom properties no llegan de forma confiable a ::backdrop en todos los navegadores, así que acá los colores van literales a propósito. */ .bact-modal::backdrop { background: rgba( 15, 22, 30, .55 ); -webkit-backdrop-filter: blur( 2px ); backdrop-filter: blur( 2px ); } @supports not ( ( backdrop-filter: blur( 2px ) ) or ( -webkit-backdrop-filter: blur( 2px ) ) ) { /* Sin desenfoque el fondo se lee demasiado: se compensa oscureciendo. */ .bact-modal::backdrop { background: rgba( 15, 22, 30, .7 ); } } /* Velo del modo de reserva (sin no hay ::backdrop). */ .bact-modal__backdrop { position: fixed; inset: 0; z-index: 0; background: rgba( 15, 22, 30, .7 ); cursor: pointer; } @supports ( ( backdrop-filter: blur( 2px ) ) or ( -webkit-backdrop-filter: blur( 2px ) ) ) { .bact-modal__backdrop { background: rgba( 15, 22, 30, .55 ); -webkit-backdrop-filter: blur( 2px ); backdrop-filter: blur( 2px ); } } dialog.bact-modal .bact-modal__backdrop { display: none; } /* -------------------------------------------------------------------------- 4. Panel del diálogo -------------------------------------------------------------------------- */ .bact-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: calc( 100vh - 40px ); max-height: calc( 100dvh - 40px ); padding: 28px 28px 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var( --bact-bg ); border-radius: var( --bact-radius-dialog ); box-shadow: var( --bact-shadow-dialog ); animation: bact-dialog-in .24s cubic-bezier( .2, .7, .3, 1 ) both; } .bact-modal__close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var( --bact-muted ); font-family: var( --bact-font-body ); font-size: 26px; line-height: 1; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .bact-modal__close:hover { background: var( --bact-soft ); color: var( --bact-ink ); } /* -------------------------------------------------------------------------- 5. Encabezado -------------------------------------------------------------------------- */ .bact-modal__head { margin: 0 0 20px; padding-right: 34px; } .bact-modal__eyebrow { display: block; margin: 0 0 6px; font-family: var( --bact-font-accent ); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; color: var( --bact-gold ); } .bact-modal__title { margin: 0 0 8px; font-family: var( --bact-font-title ); font-size: 24px; font-weight: 700; line-height: 1.2; color: var( --bact-ink ); } .bact-modal__sub { margin: 0; font-family: var( --bact-font-body ); font-size: 16px; line-height: 1.5; color: var( --bact-body ); } /* -------------------------------------------------------------------------- 6. Formulario — campos calcados de WPForms -------------------------------------------------------------------------- */ .bact-modal__form { margin: 0; padding: 0; border: 0; } /* Trampa para bots: fuera de pantalla pero nunca display:none, que es lo que los bots buscan para saltearla. */ .bact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .bact-field { margin: 0 0 var( --bact-field-gap ); } .bact-label { display: block; margin: 0 0 6px; padding: 0; font-family: var( --bact-font-body ); font-size: var( --bact-label-fs ); font-weight: 600; line-height: 1.4; color: var( --bact-label-color ); } .bact-req { color: var( --bact-error ); font-weight: 400; } .bact-sublabel { display: block; margin: 0 0 5px; font-family: var( --bact-font-body ); font-size: 14px; font-weight: 400; line-height: 1.4; color: var( --bact-sublabel-color ); } .bact-sublabel--note { margin: 6px 0 0; font-size: 13px; } .bact-hint { margin: 0 0 10px; font-family: var( --bact-font-body ); font-size: 13px; line-height: 1.45; color: var( --bact-muted ); } .bact-input, .bact-select, .bact-textarea { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0 var( --bact-field-pad-h ); background-color: var( --bact-bg ); border: 1px solid var( --bact-line ); border-radius: var( --bact-radius-field ); color: var( --bact-field-text ); font-family: var( --bact-font-body ); font-weight: 400; line-height: 1.4; /* Nunca por debajo de 16px: con menos, iOS hace zoom al enfocar el campo. */ font-size: var( --bact-field-fs ); transition: border-color .16s ease, box-shadow .16s ease; -webkit-appearance: none; appearance: none; } .bact-input, .bact-select { height: var( --bact-field-h ); } .bact-textarea { min-height: 96px; padding: 11px var( --bact-field-pad-h ); line-height: 1.45; resize: vertical; } .bact-input::placeholder, .bact-textarea::placeholder { color: var( --bact-placeholder ); opacity: 1; } .bact-select { padding-right: 38px; background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23192735' d='M1.41 0 6 4.59 10.59 0 12 1.42 6 7.42 0 1.42z'/%3E%3C/svg%3E" ); background-repeat: no-repeat; background-position: right var( --bact-field-pad-h ) center; background-size: 12px 8px; cursor: pointer; } /* Mientras sigue elegido el placeholder ("Elegí una opción") el select se ve como un campo vacío, igual que en el formulario del sitio. */ .bact-select:required:invalid { color: var( --bact-placeholder ); } .bact-select option { color: var( --bact-ink ); } .bact-input:hover, .bact-select:hover, .bact-textarea:hover { border-color: rgba( 0, 0, 0, .4 ); } .bact-input:focus, .bact-select:focus, .bact-textarea:focus { border-color: var( --bact-gold ); box-shadow: var( --bact-focus-ring ); outline: none; } /* El autorrelleno de Chrome pinta el campo de amarillo; el relleno interior lo devuelve al blanco del formulario. */ .bact-input:-webkit-autofill, .bact-textarea:-webkit-autofill { -webkit-text-fill-color: var( --bact-field-text ); box-shadow: inset 0 0 0 100px var( --bact-bg ); } /* -------------------------------------------------------------------------- 7. Grupo teléfono + email -------------------------------------------------------------------------- */ .bact-group { margin: 0 0 var( --bact-field-gap ); padding: 0; border: 0; min-inline-size: 0; } .bact-group > .bact-label { padding: 0; float: none; } .bact-group__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bact-group__row .bact-field { margin: 0; min-width: 0; } /* -------------------------------------------------------------------------- 8. Errores y contador -------------------------------------------------------------------------- */ .bact-error { margin: 6px 0 0; font-family: var( --bact-font-body ); font-size: 14px; line-height: 1.4; color: var( --bact-error ); } .bact-error[hidden], .bact-error:empty { display: none; } [aria-invalid="true"].bact-input, [aria-invalid="true"].bact-select, [aria-invalid="true"].bact-textarea { border-color: var( --bact-error ); } [aria-invalid="true"].bact-input:focus, [aria-invalid="true"].bact-select:focus, [aria-invalid="true"].bact-textarea:focus { border-color: var( --bact-error ); box-shadow: 0 0 0 3px rgba( 214, 54, 55, .2 ); } .bact-count { margin: 6px 0 0; font-family: var( --bact-font-body ); font-size: 13px; line-height: 1.4; text-align: right; color: var( --bact-muted ); } .bact-count.is-ok { color: var( --bact-ok ); } /* -------------------------------------------------------------------------- 9. Botón de envío -------------------------------------------------------------------------- */ .bact-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var( --bact-btn-h ); margin: 10px 0 0; padding: 10px 22px; border: 0; border-radius: var( --bact-radius-btn ); background: var( --bact-gold ); color: #ffffff; font-family: var( --bact-font-accent ); font-size: var( --bact-btn-fs ); font-weight: 600; line-height: 1.2; letter-spacing: .4px; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 6px 16px rgba( 204, 167, 118, .35 ); transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease, opacity .18s ease; -webkit-appearance: none; appearance: none; } .bact-submit:hover { background: var( --bact-gold-dark ); box-shadow: 0 8px 20px rgba( 204, 167, 118, .45 ); } .bact-submit:active { transform: translateY( 1px ); box-shadow: 0 4px 12px rgba( 204, 167, 118, .35 ); } /* Disco blanco con el verde de WhatsApp adentro: identifica el canal sin que el botón deje de ser el dorado de Brazos Abiertos. */ .bact-submit__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #ffffff; color: var( --bact-wa ); } .bact-submit__icon svg { display: block; width: 16px; height: 16px; fill: currentColor; } .bact-submit__text { display: inline-block; } /* Explicación de por qué falta algo. El botón nunca se deshabilita, así que este texto es el que orienta cuando el envío no puede seguir. */ .bact-submit__why { margin: 8px 0 0; font-family: var( --bact-font-body ); font-size: 13px; line-height: 1.45; text-align: center; color: var( --bact-muted ); } .bact-submit__why:empty { display: none; } .bact-modal.has-error .bact-submit__why { color: var( --bact-error ); } /* -------------------------------------------------------------------------- 10. Estado "enviando" -------------------------------------------------------------------------- */ .bact-modal.is-sending .bact-submit { opacity: .72; cursor: progress; pointer-events: none; box-shadow: none; } .bact-modal.is-sending .bact-submit__icon { width: 20px; height: 20px; background: transparent; border: 2px solid rgba( 255, 255, 255, .45 ); border-top-color: #ffffff; animation: bact-spin .7s linear infinite; } .bact-modal.is-sending .bact-submit__icon svg { display: none; } .bact-modal.is-sending .bact-input, .bact-modal.is-sending .bact-select, .bact-modal.is-sending .bact-textarea { opacity: .7; pointer-events: none; } /* -------------------------------------------------------------------------- 11. Aviso legal -------------------------------------------------------------------------- */ .bact-legal { margin: 14px 0 0; font-family: var( --bact-font-body ); font-size: 13px; line-height: 1.5; text-align: center; color: var( --bact-muted ); } .bact-legal__link { color: var( --bact-gold-dark ); text-decoration: underline; text-underline-offset: 2px; } .bact-legal__link:hover { color: var( --bact-ink ); } /* -------------------------------------------------------------------------- 12. Estado de éxito -------------------------------------------------------------------------- */ .bact-modal__done { text-align: center; } .bact-modal__done[hidden] { display: none; } .bact-modal.is-done .bact-modal__form { display: none; } .bact-done__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 4px auto 14px; border-radius: 50%; background: rgba( 0, 187, 45, .12 ); color: var( --bact-ok ); } .bact-done__icon svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .bact-done__title { margin: 0 0 8px; font-family: var( --bact-font-title ); font-size: 21px; font-weight: 700; line-height: 1.25; color: var( --bact-ink ); } .bact-done__text { margin: 0 0 16px; font-family: var( --bact-font-body ); font-size: 16px; line-height: 1.5; color: var( --bact-body ); } .bact-done__link { margin: 0; } .bact-done__code { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 12px 14px; background: var( --bact-soft ); border-radius: var( --bact-radius-field ); font-family: var( --bact-font-body ); font-size: 14px; line-height: 1.4; color: var( --bact-body ); } .bact-done__codevalue { font-family: var( --bact-font-mono ); font-size: 15px; font-weight: 700; letter-spacing: .5px; color: var( --bact-ink ); word-break: break-all; } .bact-done__copy { min-height: 32px; padding: 4px 14px; border: 1px solid var( --bact-line ); border-radius: var( --bact-radius-btn ); background: var( --bact-bg ); color: var( --bact-ink ); font-family: var( --bact-font-accent ); font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; -webkit-appearance: none; appearance: none; } .bact-done__copy:hover { border-color: var( --bact-gold ); background: var( --bact-gold ); color: #ffffff; } /* -------------------------------------------------------------------------- 13. Foco visible -------------------------------------------------------------------------- */ .bact-modal a:focus-visible, .bact-modal button:focus-visible, .bact-modal input:focus-visible, .bact-modal select:focus-visible, .bact-modal textarea:focus-visible { outline: 2px solid var( --bact-gold ); outline-offset: 2px; } /* El botón dorado sobre fondo dorado necesita el contraste de la tinta. */ .bact-submit:focus-visible { outline-color: var( --bact-ink ); } /* -------------------------------------------------------------------------- 14. Mobile (≤ 640px) — hoja inferior -------------------------------------------------------------------------- */ @media ( max-width: 640px ) { .bact-modal { align-items: flex-end; padding: 0; } .bact-modal__dialog { max-width: none; /* dvh evita que la barra de direcciones de iOS recorte el contenido; la línea de vh queda antes como reserva para navegadores viejos. */ max-height: 92vh; max-height: 92dvh; padding: 24px 18px calc( 20px + env( safe-area-inset-bottom, 0px ) ); border-radius: var( --bact-radius-dialog ) var( --bact-radius-dialog ) 0 0; box-shadow: 0 -10px 34px rgba( 25, 39, 53, .26 ); animation-name: bact-sheet-in; } .bact-modal__title { font-size: 21px; } .bact-modal__head { margin-bottom: 16px; } .bact-group__row { grid-template-columns: 1fr; gap: var( --bact-field-gap ); } .bact-done__code { font-size: 13px; } } /* -------------------------------------------------------------------------- 15. Animaciones -------------------------------------------------------------------------- */ @keyframes bact-dialog-in { from { opacity: 0; transform: translateY( 10px ) scale( .985 ); } to { opacity: 1; transform: none; } } @keyframes bact-sheet-in { from { opacity: 0; transform: translateY( 26px ); } to { opacity: 1; transform: none; } } @keyframes bact-spin { to { transform: rotate( 360deg ); } } @media ( prefers-reduced-motion: reduce ) { .bact-modal__dialog { animation: none; } .bact-modal *, .bact-modal *::before, .bact-modal *::after { transition-duration: .01ms; } /* El spinner no se anula: es la única señal de que el envío está en curso. Se lo frena a un giro lento, que no dispara mareos. */ .bact-modal.is-sending .bact-submit__icon { animation-duration: 1.6s; } } /* -------------------------------------------------------------------------- 16. Alto contraste de Windows -------------------------------------------------------------------------- */ @media ( forced-colors: active ) { .bact-modal__dialog { border: 1px solid CanvasText; } .bact-submit, .bact-done__copy { border: 1px solid ButtonText; } .bact-submit__icon { border: 1px solid ButtonText; } }