/** * Área de cliente (shortcode [jff_gestion_reservas]). * * Todo cuelga de .jff-cgr para no pisar los estilos del tema, y las variables * de color están declaradas ahí mismo: si el sitio cambia de paleta, basta con * redefinirlas en el tema hijo sin tocar esta hoja. * * @package JFF_Cliente_Gestion_Reservas */ /* Las variables se declaran en los tres puntos de entrada: la pantalla y, por separado, el modal y los avisos flotantes, que el navegador cuelga del y por tanto quedan fuera de .jff-cgr. */ .jff-cgr, .jff-cgr-modal, .jff-cgr-toasts { --jff-cgr-primario: #1a364a; --jff-cgr-secundario: #d9530d; --jff-cgr-texto: #33424d; --jff-cgr-suave: #7a8a96; --jff-cgr-borde: #e6edf1; --jff-cgr-fondo: #f5f8fa; --jff-cgr-ok: #1f7a4d; --jff-cgr-error: #a3231b; } .jff-cgr { box-sizing: border-box; color: var(--jff-cgr-texto); font-size: 16px; line-height: 1.6; margin: 0 auto; max-width: 900px; width: 100%; } .jff-cgr *, .jff-cgr *::before, .jff-cgr *::after { box-sizing: inherit; } /* -------------------------------------------------------------------------- * Tarjetas y titulares * ----------------------------------------------------------------------- */ .jff-cgr-card { background: #fff; border: 1px solid var(--jff-cgr-borde); border-radius: 14px; box-shadow: 0 6px 22px rgba(26, 54, 74, 0.08); margin: 0 0 24px; padding: 24px; } .jff-cgr-card--estrecha { max-width: 520px; margin-left: auto; margin-right: auto; } .jff-cgr-titulo { color: var(--jff-cgr-primario); font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0 0 8px; } .jff-cgr-subtitulo { color: var(--jff-cgr-primario); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; margin: 0 0 12px; text-transform: uppercase; } .jff-cgr-intro { margin: 0 0 18px; } .jff-cgr-nota { color: var(--jff-cgr-suave); font-size: 14px; margin: 0 0 12px; } .jff-cgr-nota--suelta { margin-bottom: 20px; } .jff-cgr-nota--destacada { background: #fff4ec; border-left: 4px solid var(--jff-cgr-secundario); border-radius: 6px; color: var(--jff-cgr-primario); font-weight: 600; margin-top: 12px; padding: 10px 14px; } /* -------------------------------------------------------------------------- * Cabecera de la pantalla de reservas * ----------------------------------------------------------------------- */ .jff-cgr-cabecera { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin: 0 0 20px; } .jff-cgr-cabecera .jff-cgr-intro { margin: 0; } /* -------------------------------------------------------------------------- * Formularios * ----------------------------------------------------------------------- */ .jff-cgr-label { color: var(--jff-cgr-primario); display: block; font-size: 14px; font-weight: 700; margin: 0 0 6px; } .jff-cgr-input { background: #fff; border: 1px solid #c9d6de; border-radius: 8px; color: var(--jff-cgr-texto); display: block; font-family: inherit; font-size: 16px; margin: 0 0 16px; padding: 11px 13px; width: 100%; } .jff-cgr-input:focus { border-color: var(--jff-cgr-primario); box-shadow: 0 0 0 3px rgba(26, 54, 74, 0.15); outline: none; } .jff-cgr-input:disabled { background: var(--jff-cgr-fondo); color: var(--jff-cgr-suave); cursor: not-allowed; } .jff-cgr-campos { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .jff-cgr-campo { margin: 0; } .jff-cgr-btn { background: var(--jff-cgr-fondo); border: 1px solid var(--jff-cgr-borde); border-radius: 8px; color: var(--jff-cgr-primario); cursor: pointer; display: inline-block; font-family: inherit; font-size: 15px; font-weight: 700; padding: 12px 22px; text-align: center; text-decoration: none; transition: background-color 0.15s ease, opacity 0.15s ease; } .jff-cgr-btn:hover, .jff-cgr-btn:focus { background: #e9eff3; color: var(--jff-cgr-primario); } .jff-cgr-btn--principal { background: var(--jff-cgr-secundario); border-color: var(--jff-cgr-secundario); color: #fff; } .jff-cgr-btn--principal:hover, .jff-cgr-btn--principal:focus { background: #c2490b; color: #fff; } .jff-cgr-btn--secundario { background: #fff; } .jff-cgr-btn[disabled] { cursor: progress; opacity: 0.6; } /* -------------------------------------------------------------------------- * Avisos * ----------------------------------------------------------------------- */ /* Panel de aviso: icono a la izquierda, titular y texto. Se usa en la pantalla de acceso y en la cabecera de la lista de reservas. */ .jff-cgr-aviso { align-items: flex-start; background: var(--jff-cgr-fondo); border: 1px solid var(--jff-cgr-borde); border-radius: 12px; display: flex; gap: 13px; margin: 0 0 18px; padding: 16px 18px; } .jff-cgr-aviso:focus { outline: 2px solid var(--jff-cgr-primario); outline-offset: 2px; } .jff-cgr-aviso__icono { flex: none; height: 26px; margin-top: 1px; width: 26px; } .jff-cgr-aviso__icono svg { display: block; height: 100%; width: 100%; } .jff-cgr-aviso__texto { min-width: 0; } .jff-cgr-aviso__titulo { color: var(--jff-cgr-primario); font-size: 16px; font-weight: 800; margin: 0 0 3px; } .jff-cgr-aviso p { margin: 0 0 8px; } .jff-cgr-aviso p:last-child { margin-bottom: 0; } .jff-cgr-aviso--ok { background: #eef8f2; border-color: #c9e7d7; } .jff-cgr-aviso--ok .jff-cgr-aviso__icono { color: var(--jff-cgr-ok); } .jff-cgr-aviso--error { background: #fdf1f0; border-color: #f2ccc9; } .jff-cgr-aviso--error .jff-cgr-aviso__icono { color: var(--jff-cgr-error); } .jff-cgr-aviso--info { background: #fff4ec; border-color: #f7d8c2; } .jff-cgr-aviso--info .jff-cgr-aviso__icono { color: var(--jff-cgr-secundario); } .jff-cgr-contacto { font-size: 14px; } /* -------------------------------------------------------------------------- * Modal: para lo que hay que leer antes de seguir (un cambio rechazado, una * sesión caducada). Se usa nativo, que ya trae el foco atrapado, el * cierre con Escape y el fondo oscurecido. * ----------------------------------------------------------------------- */ .jff-cgr-modal { background: #fff; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(16, 32, 44, 0.28); box-sizing: border-box; color: var(--jff-cgr-texto); font-size: 16px; line-height: 1.6; max-width: 540px; padding: 0; width: calc(100% - 32px); } .jff-cgr-modal *, .jff-cgr-modal *::before, .jff-cgr-modal *::after { box-sizing: inherit; } .jff-cgr-modal::backdrop { background: rgba(16, 32, 44, 0.55); } .jff-cgr-modal[open] { animation: jff-cgr-modal-entra 0.22s ease-out; } @keyframes jff-cgr-modal-entra { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } } .jff-cgr-modal__barra { border-radius: 16px 16px 0 0; height: 5px; } .jff-cgr-modal--error .jff-cgr-modal__barra { background: var(--jff-cgr-error); } .jff-cgr-modal--ok .jff-cgr-modal__barra { background: var(--jff-cgr-ok); } .jff-cgr-modal--info .jff-cgr-modal__barra { background: var(--jff-cgr-secundario); } .jff-cgr-modal__cuerpo { display: flex; gap: 18px; padding: 26px 28px 6px; } .jff-cgr-modal__icono { align-items: center; border-radius: 50%; display: flex; flex: none; height: 46px; justify-content: center; width: 46px; } .jff-cgr-modal__icono svg { height: 26px; width: 26px; } .jff-cgr-modal--error .jff-cgr-modal__icono { background: #fdf1f0; color: var(--jff-cgr-error); } .jff-cgr-modal--ok .jff-cgr-modal__icono { background: #eef8f2; color: var(--jff-cgr-ok); } .jff-cgr-modal--info .jff-cgr-modal__icono { background: #fff4ec; color: var(--jff-cgr-secundario); } .jff-cgr-modal__texto { min-width: 0; } .jff-cgr-modal__titulo { color: var(--jff-cgr-primario); font-size: 21px; font-weight: 800; line-height: 1.3; margin: 2px 0 10px; } .jff-cgr-modal__texto p { margin: 0 0 12px; } .jff-cgr-modal__texto p:last-child { margin-bottom: 0; } .jff-cgr-modal__contacto { background: var(--jff-cgr-fondo); border-radius: 10px; margin-top: 14px; padding: 12px 14px; } .jff-cgr-modal__contacto p { font-size: 14px; margin: 0; } .jff-cgr-modal__pie { display: flex; gap: 10px; justify-content: flex-end; padding: 18px 28px 24px; } /* Respaldo para navegadores sin : se posiciona a mano. */ .jff-cgr-modal.jff-cgr-modal--respaldo { display: none; } .jff-cgr-modal.jff-cgr-modal--respaldo.is-abierto { display: block; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); z-index: 100000; } .jff-cgr-fondo-respaldo { background: rgba(16, 32, 44, 0.55); inset: 0; position: fixed; z-index: 99999; } /* -------------------------------------------------------------------------- * Avisos flotantes: confirmaciones que no deben cortar el paso. * ----------------------------------------------------------------------- */ .jff-cgr-toasts { bottom: 20px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; max-width: 380px; position: fixed; right: 20px; width: calc(100% - 40px); z-index: 99998; } .jff-cgr-toasts *, .jff-cgr-toasts *::before, .jff-cgr-toasts *::after { box-sizing: inherit; } .jff-cgr-toast { align-items: flex-start; animation: jff-cgr-toast-entra 0.25s ease-out; background: #fff; border-left: 4px solid var(--jff-cgr-ok); border-radius: 12px; box-shadow: 0 12px 34px rgba(16, 32, 44, 0.22); color: var(--jff-cgr-texto); display: flex; font-size: 15px; gap: 12px; line-height: 1.5; padding: 14px 14px 14px 16px; } .jff-cgr-toast--error { border-left-color: var(--jff-cgr-error); } .jff-cgr-toast.is-saliendo { animation: jff-cgr-toast-sale 0.2s ease-in forwards; } @keyframes jff-cgr-toast-entra { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes jff-cgr-toast-sale { to { opacity: 0; transform: translateX(24px); } } .jff-cgr-toast__icono { color: var(--jff-cgr-ok); flex: none; height: 22px; margin-top: 1px; width: 22px; } .jff-cgr-toast--error .jff-cgr-toast__icono { color: var(--jff-cgr-error); } .jff-cgr-toast__icono svg { display: block; height: 100%; width: 100%; } .jff-cgr-toast__texto { flex: 1 1 auto; min-width: 0; } .jff-cgr-toast__titulo { color: var(--jff-cgr-primario); display: block; font-weight: 800; } .jff-cgr-toast__cerrar { background: none; border: 0; color: var(--jff-cgr-suave); cursor: pointer; flex: none; font-size: 20px; line-height: 1; padding: 0 2px; } .jff-cgr-toast__cerrar:hover, .jff-cgr-toast__cerrar:focus { color: var(--jff-cgr-primario); } @media (prefers-reduced-motion: reduce) { .jff-cgr-modal[open], .jff-cgr-toast, .jff-cgr-toast.is-saliendo { animation: none; } } /* -------------------------------------------------------------------------- * Tarjeta de reserva * ----------------------------------------------------------------------- */ /* La tarjeta es un
: plegada de entrada para que varias reservas se vean de un vistazo, y se abre desde su . */ .jff-cgr-reserva { padding: 0; transition: box-shadow 0.15s ease; } .jff-cgr-reserva[open] { box-shadow: 0 8px 26px rgba(26, 54, 74, 0.14); } .jff-cgr-reserva__resumen { align-items: flex-start; cursor: pointer; display: flex; gap: 14px; list-style: none; padding: 20px 24px; } /* Se oculta el triángulo nativo: la flecha la dibujamos nosotros. */ .jff-cgr-reserva__resumen::-webkit-details-marker { display: none; } .jff-cgr-reserva__resumen::marker { content: ''; } .jff-cgr-reserva__resumen:hover { background: var(--jff-cgr-fondo); border-radius: 13px; } .jff-cgr-reserva[open] .jff-cgr-reserva__resumen:hover { border-radius: 13px 13px 0 0; } .jff-cgr-reserva__resumen:focus-visible { outline: 2px solid var(--jff-cgr-primario); outline-offset: -3px; } .jff-cgr-reserva__flecha { border-right: 2px solid var(--jff-cgr-secundario); border-bottom: 2px solid var(--jff-cgr-secundario); flex: none; height: 9px; margin-top: 7px; transform: rotate(-45deg); transition: transform 0.2s ease; width: 9px; } .jff-cgr-reserva[open] .jff-cgr-reserva__flecha { transform: rotate(45deg); } .jff-cgr-reserva__titular { display: block; flex: 1 1 auto; min-width: 0; } .jff-cgr-reserva__ref { color: var(--jff-cgr-suave); display: block; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .jff-cgr-reserva__pack { color: var(--jff-cgr-primario); display: block; font-size: 21px; font-weight: 800; line-height: 1.25; margin: 2px 0 4px; } .jff-cgr-reserva__meta { color: var(--jff-cgr-suave); display: block; font-size: 14px; } .jff-cgr-reserva__vistazo { color: var(--jff-cgr-primario); display: block; font-size: 14px; margin-top: 4px; } .jff-cgr-reserva__debe { color: var(--jff-cgr-secundario); font-weight: 700; } .jff-cgr-reserva__pagado { color: var(--jff-cgr-ok); font-weight: 700; } .jff-cgr-reserva__detalle { border-top: 1px solid var(--jff-cgr-borde); padding: 20px 24px 24px; } .jff-cgr-estado { border-radius: 999px; font-size: 13px; font-weight: 700; padding: 5px 14px; white-space: nowrap; } .jff-cgr-estado--pendiente { background: #fff4ec; color: #9a4a12; } .jff-cgr-estado--confirmada { background: #eef8f2; color: var(--jff-cgr-ok); } .jff-cgr-estado--cancelada { background: #f2f4f6; color: var(--jff-cgr-suave); } /* -------------------------------------------------------------------------- * Resumen de cuenta * ----------------------------------------------------------------------- */ .jff-cgr-cuenta { margin: 0 0 24px; } .jff-cgr-cuenta__lista { border-top: 1px solid var(--jff-cgr-borde); margin: 0; } .jff-cgr-cuenta__fila { align-items: baseline; border-bottom: 1px solid var(--jff-cgr-borde); display: flex; gap: 16px; justify-content: space-between; padding: 8px 0; } .jff-cgr-cuenta__fila dt { color: var(--jff-cgr-suave); font-weight: 400; margin: 0; } .jff-cgr-cuenta__fila dd { color: var(--jff-cgr-primario); margin: 0; text-align: right; white-space: nowrap; } .jff-cgr-cuenta__fila--total dt, .jff-cgr-cuenta__fila--total dd { color: var(--jff-cgr-primario); font-size: 17px; font-weight: 800; } .jff-cgr-cuenta__detalle { color: var(--jff-cgr-suave); display: block; font-size: 13px; } /* -------------------------------------------------------------------------- * Extras * ----------------------------------------------------------------------- */ .jff-cgr-extra { border: 1px solid var(--jff-cgr-borde); border-radius: 12px; margin: 0 0 14px; padding: 16px 18px; } .jff-cgr-extra.is-activo { border-color: #c8d8e2; box-shadow: inset 3px 0 0 var(--jff-cgr-secundario); } .jff-cgr-extra__cabecera { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; } .jff-cgr-check { align-items: center; cursor: pointer; display: flex; gap: 10px; } .jff-cgr-check input[type='checkbox'] { accent-color: var(--jff-cgr-secundario); height: 20px; margin: 0; width: 20px; } .jff-cgr-check input[type='checkbox']:disabled { cursor: not-allowed; } .jff-cgr-check__texto { color: var(--jff-cgr-primario); font-size: 17px; font-weight: 700; } .jff-cgr-extra__precio { color: var(--jff-cgr-suave); font-size: 14px; white-space: nowrap; } .jff-cgr-extra__cuerpo { padding: 14px 0 0; } .jff-cgr-extra:not(.is-activo) .jff-cgr-extra__cuerpo { opacity: 0.55; } .jff-cgr-extra__pie { padding: 6px 0 0; } /* -------------------------------------------------------------------------- * Estado vacío * ----------------------------------------------------------------------- */ .jff-cgr-vacio h3 { color: var(--jff-cgr-primario); font-size: 20px; font-weight: 800; margin: 0 0 8px; } /* -------------------------------------------------------------------------- * Móvil * ----------------------------------------------------------------------- */ @media (max-width: 600px) { .jff-cgr-card { padding: 18px; } .jff-cgr-titulo { font-size: 22px; } .jff-cgr-cabecera { flex-direction: column; } /* El
no lleva relleno propio: lo ponen el resumen y el detalle. */ .jff-cgr-reserva { padding: 0; } .jff-cgr-reserva__resumen { gap: 10px; padding: 16px 18px; } .jff-cgr-reserva__detalle { padding: 16px 18px 18px; } .jff-cgr-reserva__pack { font-size: 19px; } /* En móvil el modal se pega abajo, que es donde llega el pulgar. */ .jff-cgr-modal { margin-bottom: 0; max-width: none; width: 100%; } .jff-cgr-modal__cuerpo { padding: 22px 20px 6px; } .jff-cgr-modal__pie { padding: 16px 20px 20px; } .jff-cgr-modal__pie .jff-cgr-btn { width: 100%; } .jff-cgr-toasts { bottom: 12px; left: 12px; right: 12px; width: auto; } .jff-cgr-btn { width: 100%; } .jff-cgr-cuenta__fila { flex-direction: column; gap: 2px; } .jff-cgr-cuenta__fila dd { text-align: left; } }