/* Díxome Beauty Booking — formulario público. Aislado del tema: todo cuelga de .dbb-booking / .dbb-services y usa las variables --dbb-* (colores y radio de Configuración → Apariencia o del widget de Elementor). */ .dbb-booking, .dbb-services, .dbb-button { --dbb-primary: #563448; --dbb-secondary: #744E62; --dbb-accent: #D7ADA6; --dbb-bg: #FFFDFB; --dbb-text: #28242A; --dbb-radius: 16px; --dbb-line: color-mix(in srgb, var(--dbb-text) 14%, transparent); --dbb-soft: color-mix(in srgb, var(--dbb-accent) 22%, var(--dbb-bg)); --dbb-muted: color-mix(in srgb, var(--dbb-text) 68%, transparent); } .dbb-booking { color: var(--dbb-text); font-size: 16px; line-height: 1.5; max-width: 1080px; margin: 0 auto; } .dbb-booking *, .dbb-booking *::before, .dbb-booking *::after { box-sizing: border-box; } .dbb-booking :is(h2, h3, p) { margin: 0; color: inherit; } .dbb-booking h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.2; margin-bottom: 16px; outline: none; } .dbb-booking h3 { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin: 22px 0 10px; color: var(--dbb-secondary); } .dbb-booking a { color: var(--dbb-primary); text-underline-offset: 3px; } .dbb-booking button, .dbb-booking input, .dbb-booking select, .dbb-booking textarea { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; } .dbb-booking :is(button, a, input, select, textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--dbb-primary) 55%, transparent); outline-offset: 2px; } .dbb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .dbb-muted { color: var(--dbb-muted); } .dbb-loading { padding: 40px 0; text-align: center; color: var(--dbb-muted); } /* Mientras carga, reserva el alto aproximado del primer paso: evita que lo que va debajo salte (CLS). */ .dbb-booking > .dbb-loading { min-height: min(640px, 75vh); } /* Pasos */ .dbb-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; counter-reset: none; } .dbb-steps li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 999px; background: var(--dbb-bg); border: 1px solid var(--dbb-line); font-size: 14px; font-weight: 600; color: var(--dbb-muted); margin: 0; } .dbb-steps li span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dbb-line); color: var(--dbb-text); font-size: 12px; flex: none; } .dbb-steps li.is-on { border-color: var(--dbb-primary); color: var(--dbb-primary); } .dbb-steps li.is-on span { background: var(--dbb-primary); color: #fff; } .dbb-steps li.is-done span { background: var(--dbb-accent); color: var(--dbb-text); } .dbb-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px; align-items: start; } .dbb-body { background: var(--dbb-bg); border: 1px solid var(--dbb-line); border-radius: var(--dbb-radius); padding: clamp(18px, 3vw, 32px); min-width: 0; } .dbb-summary { position: sticky; top: 100px; background: var(--dbb-soft); border-radius: var(--dbb-radius); padding: 20px; font-size: 14px; display: grid; gap: 8px; } .dbb-summary__t { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--dbb-secondary); } .dbb-summary__when { font-weight: 700; color: var(--dbb-primary); } .dbb-summary__tot { border-top: 1px solid var(--dbb-line); padding-top: 8px; font-weight: 600; } /* Botones */ .dbb-booking .dbb-btn, .dbb-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 999px; border: 1px solid var(--dbb-primary); background: var(--dbb-primary); color: #fff !important; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .2s ease, background-color .2s ease; } .dbb-booking .dbb-btn:hover, .dbb-button:hover { background: var(--dbb-secondary); border-color: var(--dbb-secondary); transform: translateY(-1px); } .dbb-booking .dbb-btn.ghost { background: transparent; color: var(--dbb-primary) !important; } .dbb-booking .dbb-btn.ghost:hover { background: var(--dbb-soft); } .dbb-booking .dbb-btn.danger { border-color: #b3261e; color: #b3261e !important; } .dbb-booking .dbb-btn:disabled { opacity: .6; cursor: wait; transform: none; } .dbb-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: space-between; } .dbb-actions.center { justify-content: center; } .dbb-booking .dbb-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .dbb-booking .dbb-chip { border: 1px solid var(--dbb-line); background: var(--dbb-bg); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 14px; color: var(--dbb-text); } .dbb-booking .dbb-chip:hover { border-color: var(--dbb-primary); color: var(--dbb-primary); } .dbb-booking .dbb-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--dbb-line); background: transparent; cursor: pointer; font-size: 20px; line-height: 1; flex: none; color: var(--dbb-text); } /* Servicios */ .dbb-booking .dbb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .dbb-booking .dbb-card { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 14px; border-radius: calc(var(--dbb-radius) - 4px); border: 1px solid var(--dbb-line); background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; color: var(--dbb-text); } .dbb-booking .dbb-card:hover:not(:disabled) { border-color: var(--dbb-primary); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--dbb-primary) 60%, transparent); transform: translateY(-1px); } .dbb-booking .dbb-card:disabled { cursor: default; opacity: .75; } .dbb-booking .dbb-card.is-on { border-color: var(--dbb-primary); background: var(--dbb-soft); opacity: 1; } .dbb-booking .dbb-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; flex: none; } .dbb-booking .dbb-card__b { display: grid; gap: 3px; flex: 1; min-width: 0; } .dbb-booking .dbb-card__n { font-weight: 700; } .dbb-booking .dbb-card__d { font-size: 13px; color: var(--dbb-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dbb-booking .dbb-card__m { font-size: 14px; font-weight: 600; color: var(--dbb-primary); } .dbb-booking .dbb-card__w { font-size: 12px; color: #7a4a00; } .dbb-booking .dbb-card__go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--dbb-soft); color: var(--dbb-primary); font-weight: 700; flex: none; } .dbb-booking .dbb-lines { display: grid; gap: 10px; } .dbb-booking .dbb-line { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--dbb-soft); } .dbb-booking .dbb-line > div { flex: 1; display: grid; } .dbb-booking .dbb-line small { color: var(--dbb-muted); } .dbb-booking .dbb-line select { max-width: 220px; } .dbb-add { text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; color: var(--dbb-muted) !important; font-weight: 500; } /* Calendario y horas */ .dbb-when { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px; align-items: start; } .dbb-cal__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dbb-cal__h p { font-weight: 700; text-transform: capitalize; } .dbb-booking .dbb-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--dbb-line); background: transparent; cursor: pointer; font-size: 20px; color: var(--dbb-text); } .dbb-booking .dbb-nav:disabled { opacity: .3; cursor: default; } .dbb-cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .dbb-cal__w { text-align: center; font-size: 12px; font-weight: 700; color: var(--dbb-muted); padding: 4px 0; } .dbb-booking .dbb-day { position: relative; aspect-ratio: 1; border: 0; border-radius: 12px; background: var(--dbb-soft); cursor: pointer; font-weight: 600; color: var(--dbb-text); min-height: 40px; } .dbb-booking .dbb-day i { position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--dbb-primary); } .dbb-booking .dbb-day:hover:not(:disabled) { outline: 2px solid var(--dbb-primary); } .dbb-booking .dbb-day:disabled { background: transparent; color: color-mix(in srgb, var(--dbb-text) 30%, transparent); cursor: default; } .dbb-booking .dbb-day.is-today { box-shadow: inset 0 0 0 1px var(--dbb-secondary); } .dbb-booking .dbb-day.is-on { background: var(--dbb-primary); color: #fff; } .dbb-booking .dbb-day.is-on i { background: #fff; } .dbb-booking .dbb-times__t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .dbb-badge { font-size: 12px; text-transform: none; font-weight: 700; background: var(--dbb-accent); color: var(--dbb-text); padding: 3px 10px; border-radius: 999px; } .dbb-booking .dbb-times__g { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dbb-muted); margin: 12px 0 6px !important; } .dbb-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; } .dbb-booking .dbb-times button { min-height: 44px; border-radius: 10px; border: 1px solid var(--dbb-line); background: #fff; cursor: pointer; font-weight: 600; color: var(--dbb-text); } .dbb-booking .dbb-times button:hover { border-color: var(--dbb-primary); background: var(--dbb-primary); color: #fff; } .dbb-booking .dbb-alts { display: grid; gap: 8px; margin-top: 12px; } .dbb-booking .dbb-alts .dbb-chip { text-align: left; } /* Formulario */ .dbb-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .dbb-form .wide { grid-column: 1 / -1; } .dbb-f { display: grid; gap: 6px; } .dbb-f label { font-weight: 600; font-size: 14px; } .dbb-f small { font-weight: 400; color: var(--dbb-muted); } .dbb-booking :is(input:not([type=checkbox]), select, textarea) { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--dbb-text) 28%, transparent); border-radius: 12px; background: #fff; } .dbb-booking textarea { min-height: 90px; resize: vertical; } .dbb-booking [aria-invalid=true] { border-color: #b3261e !important; } .dbb-err { color: #b3261e; font-size: 13px; min-height: 0; } .dbb-err:empty { display: none; } .dbb-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important; } .dbb-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--dbb-primary); flex: none; } .dbb-terms { font-size: 14px; color: var(--dbb-muted); background: var(--dbb-soft); padding: 12px 14px; border-radius: 12px; } .dbb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .dbb-alert { grid-column: 1 / -1; background: #fdeceb; border: 1px solid #f1b4ae; color: #6b1a14; border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; } .dbb-help { margin-top: 20px !important; font-size: 14px; color: var(--dbb-muted); } /* Confirmación y gestión */ .dbb-done { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 16px 0; } .dbb-done__ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: var(--dbb-primary); color: #fff; animation: dbbPop .5s cubic-bezier(.2, 1.4, .4, 1); } .dbb-done__w { font-size: 20px; font-weight: 700; color: var(--dbb-primary); } @keyframes dbbPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } .dbb-manage { display: grid; gap: 8px; padding: 18px; border-radius: 14px; background: var(--dbb-soft); } .dbb-status { justify-self: start; font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--dbb-accent); } .dbb-status[class*="s-cancelled"] { background: #f3d6d3; color: #6b1a14; } /* Listado de servicios [dbb_servicios] */ .dbb-services { color: var(--dbb-text); } .dbb-services__cat { margin: 28px 0 12px; } .dbb-services__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .dbb-services__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--dbb-bg); border: 1px solid var(--dbb-line); border-radius: var(--dbb-radius); } .dbb-services__name { font-weight: 700; margin: 0; } .dbb-services__desc { margin: 4px 0 0; font-size: 14px; color: var(--dbb-muted); } .dbb-services__meta { margin: 6px 0 0; font-weight: 600; color: var(--dbb-primary); font-size: 14px; } .dbb-services__btn { flex: none; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--dbb-primary); color: var(--dbb-primary); text-decoration: none; font-weight: 600; } .dbb-services__btn:hover { background: var(--dbb-primary); color: #fff; } .dbb-services__note { font-size: 13px; color: var(--dbb-muted); } @media (max-width: 900px) { .dbb-layout { grid-template-columns: minmax(0, 1fr); } .dbb-summary { position: static; order: -1; } .dbb-when { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .dbb-steps li { font-size: 0; justify-content: center; padding: 8px; } .dbb-steps li.is-on { font-size: 13px; } .dbb-form { grid-template-columns: 1fr; } .dbb-actions { flex-direction: column-reverse; } .dbb-actions .dbb-btn { width: 100%; } .dbb-submit { position: sticky; bottom: 12px; z-index: 5; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35); } .dbb-booking .dbb-cards { grid-template-columns: 1fr; } .dbb-booking .dbb-line { flex-wrap: wrap; } .dbb-booking .dbb-line select { max-width: none; flex: 1 1 100%; order: 3; } .dbb-services__item { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .dbb-booking *, .dbb-services * { transition: none !important; animation: none !important; } } /* ===== Diseños predefinidos (.dbb-skin-*) ===== */ /* Tipografía global de Elementor cuando el formulario sigue los ajustes de Elementor */ .dbb-efont { font-family: var(--e-global-typography-text-font-family), inherit; } .dbb-efont :is(h2, .dbb-done__w) { font-family: var(--e-global-typography-primary-font-family), inherit; } /* Compacto: una columna, resumen arriba, tarjetas en lista */ .dbb-skin-compacto { max-width: 640px; } .dbb-skin-compacto .dbb-layout { grid-template-columns: 1fr; } .dbb-skin-compacto .dbb-summary { position: static; order: -1; } .dbb-skin-compacto .dbb-cards { grid-template-columns: 1fr; } .dbb-skin-compacto .dbb-when { grid-template-columns: 1fr; } .dbb-skin-compacto .dbb-form { grid-template-columns: 1fr; } .dbb-skin-compacto .dbb-steps li { font-size: 0; justify-content: center; } .dbb-skin-compacto .dbb-steps li.is-on { font-size: 13px; } /* Tarjetas con foto: rejilla con imagen grande arriba */ .dbb-skin-tarjetas .dbb-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .dbb-skin-tarjetas .dbb-card { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; position: relative; } .dbb-skin-tarjetas .dbb-card img { width: 100%; height: 160px; border-radius: 0; } .dbb-skin-tarjetas .dbb-card__b { padding: 14px 16px 18px; } .dbb-skin-tarjetas .dbb-card__go { position: absolute; top: 10px; right: 10px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .dbb-skin-tarjetas .dbb-card:not(:has(img))::before { content: ""; display: block; height: 8px; background: linear-gradient(90deg, var(--dbb-primary), var(--dbb-accent)); } /* Minimalista: sin cajas ni sombras */ .dbb-skin-minimal .dbb-body { background: transparent; border: 0; padding: 0; } .dbb-skin-minimal .dbb-summary { background: transparent; border-left: 2px solid var(--dbb-accent); border-radius: 0; } .dbb-skin-minimal .dbb-steps li { background: transparent; border: 0; border-bottom: 2px solid var(--dbb-line); border-radius: 0; } .dbb-skin-minimal .dbb-steps li.is-on { border-bottom-color: var(--dbb-primary); } .dbb-skin-minimal .dbb-card { background: transparent; border-width: 0 0 1px; border-radius: 0; box-shadow: none !important; transform: none !important; } .dbb-skin-minimal .dbb-day { background: transparent; } .dbb-skin-minimal .dbb-day:not(:disabled) { box-shadow: inset 0 0 0 1px var(--dbb-line); } .dbb-skin-minimal .dbb-day.is-on { background: var(--dbb-primary); } .dbb-skin-minimal .dbb-services__item { background: transparent; border-width: 0 0 1px; border-radius: 0; padding-left: 0; padding-right: 0; } .dbb-unavailable { padding: 16px; border: 1px dashed currentColor; border-radius: 12px; } /* Mayúscula solo en la primera letra («viernes 6 de noviembre» → «Viernes 6 de noviembre») */ .dbb-summary__when::first-letter, .dbb-booking .dbb-times__t b::first-letter, .dbb-done__w::first-letter, .dbb-booking .dbb-alts .dbb-chip::first-letter { text-transform: uppercase; } .dbb-booking { overflow-wrap: anywhere; } .dbb-booking .dbb-day { min-width: 0; padding: 0; } /* Blindaje frente a estilos de botones del tema o de Elementor (kit): se restablecen dentro del formulario */ .dbb-booking button { text-transform: none; letter-spacing: normal; text-shadow: none; line-height: 1.3; white-space: normal; word-break: normal; } .dbb-booking .dbb-chip, .dbb-booking .dbb-card, .dbb-booking .dbb-times button, .dbb-booking .dbb-day, .dbb-booking .dbb-nav, .dbb-booking .dbb-x { box-shadow: none; } .dbb-booking .dbb-chip:hover, .dbb-booking .dbb-chip:focus { background: var(--dbb-bg); } .dbb-booking .dbb-card:hover, .dbb-booking .dbb-card:focus { background: #fff; color: var(--dbb-text); } .dbb-booking .dbb-card.is-on, .dbb-booking .dbb-card.is-on:hover { background: var(--dbb-soft); } .dbb-booking .dbb-nav:hover, .dbb-booking .dbb-x:hover { background: var(--dbb-soft); color: var(--dbb-text); } .dbb-booking .dbb-day:not(:disabled):hover { background: var(--dbb-soft); color: var(--dbb-text); } .dbb-booking .dbb-day.is-on, .dbb-booking .dbb-day.is-on:hover { background: var(--dbb-primary); color: #fff; } .dbb-booking .dbb-day:disabled, .dbb-booking .dbb-day:disabled:hover { background: transparent; } .dbb-summary[hidden] { display: none !important; }/* El tema puede añadir mucho relleno a los