/* ========================================================================= bono-redesign.css · Rediseño visual de bono.html (Monnaber Nou) -------------------------------------------------------------------------- Estética: "Verde oliva Monnaber" — verde claro + oliva/lima + serif. NO altera funcionalidad: solo capa visual sobre el HTML/JS existente. Cargado al final del para ganar la cascada. Acotado a la zona de contenido (#contenidoPrincipal) para no afectar otras páginas. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap'); /* ---- Tokens ------------------------------------------------------------ */ /* Paleta: "Verde oliva Monnaber" — alineada con bookings.monnaber.com. Mismos nombres de token (legacy marrón) remapeados a verde lima/oliva. */ #contenidoPrincipal { --crema-fondo: #ffffff; /* fondo de PÁGINA (blanco) */ --crema: #f5f8e8; /* fondo del FORMULARIO (verde muy claro) */ --panel: #fafdf3; /* paneles internos (nota, total) sobre la tarjeta */ --tierra: #8FA318; /* verde oliva primario (marca) */ --tierra-osc: #6a7d12; /* verde oliva oscuro (hover/activo) */ --tierra-claro: #b5c46a; --texto: #3c3c3c; --texto-suave: #555555; --linea: #d2dba4; --azul: #3B490A; /* acento secundario: verde oscuro */ --ok: #7d8f16; --sombra: 0 14px 50px rgba(59, 73, 10, 0.14); --radio: 16px; } /* ---- Lienzo general ---------------------------------------------------- */ /* El contenedor del sitio estaba fijo a 960px. Lo ensanchamos al 80% del viewport. Mantener overflow:hidden es importante: limpia el float:left de #main (si no, #wrapper colapsa y el footer se mete en medio del contenido). */ .site_categoryList #wrapper { width: 80% !important; max-width: 1500px !important; overflow: hidden !important; border: 0 !important; background: transparent !important; margin: 0 auto !important; } #contenidoPrincipal { background: var(--crema-fondo); /* PÁGINA blanca */ padding: 48px 0 60px; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; color: var(--texto); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Tarjeta (FORMULARIO) — rellena el wrapper, fondo marrón flojo */ #categoryWrapper { width: 100%; margin: 0 auto; background: var(--crema); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 56px 64px 60px; box-sizing: border-box; } /* Anula el fondo blanco heredado (bgcolor="FFFFFF") del área del formulario para que se vea el marrón flojo de la tarjeta. */ #categoryWrapper td[bgcolor] { background: transparent !important; } /* Reset suave de las tablas heredadas (mantiene el layout, añade respiración) */ #categoryWrapper table { border-collapse: collapse; } #categoryWrapper td { vertical-align: top; } #categoryWrapper img { max-width: 100%; height: auto; } #categoryWrapper hr { border: 0; border-top: 1px solid var(--linea); margin: 22px 0; } /* ---- Titular de cabecera ---------------------------------------------- */ #categoryWrapper h3.lilaCentro, .lilaCentro { width: auto !important; max-width: 760px; margin: 0 auto 40px; font-family: 'Playfair Display', Georgia, serif; font-size: 27px; font-weight: 600; line-height: 1.32; color: var(--texto); text-align: center; letter-spacing: 0.2px; } #categoryWrapper h3.lilaCentro::after { content: ""; display: block; width: 58px; height: 3px; margin: 20px auto 0; background: var(--tierra); border-radius: 2px; } /* ---- Etiquetas de texto ----------------------------------------------- */ #contenidoPrincipal .textos { color: var(--texto); font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; } #contenidoPrincipal .text, #contenidoPrincipal .extra { font-family: 'Inter', sans-serif; color: var(--texto-suave); font-size: 13px; } /* Separación entre las 3 columnas de pasos */ #disponibilidad > table > tbody > tr > td[width="33%"] { padding: 8px 22px; } #disponibilidad > table > tbody > tr > td[width="33%"]:first-child { padding-left: 4px; } /* Encabezados de cada paso ("Seleccione el periodo…", etc.) — solo los */ #disponibilidad span.textos { display: block; font-size: 14px; margin-bottom: 12px; padding-bottom: 6px; color: var(--tierra-osc); border-bottom: 1px solid var(--linea); } /* Etiquetas pequeñas de campos (
) — respiración */ #disponibilidad div.textos { margin: 4px 0; } /* ---- Lista de periodos (pills) ---------------------------------------- */ td[id^="r_per"] { display: block !important; text-align: left !important; cursor: pointer !important; margin: 7px 0; padding: 11px 16px !important; border: 1px solid var(--linea) !important; border-radius: 10px; background: #fff !important; color: var(--texto) !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.2px; transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; } td[id^="r_per"]:hover { border-color: var(--tierra-claro) !important; background: #fafdf3 !important; } td[id^="r_per"].seleccionado { background: var(--tierra) !important; border-color: var(--tierra) !important; color: #fff !important; font-weight: 600 !important; box-shadow: 0 6px 16px rgba(143, 163, 24, 0.28); } /* ---- Campos de formulario --------------------------------------------- */ #contenidoPrincipal select, #contenidoPrincipal textarea, #contenidoPrincipal .estiloCampos, #contenidoPrincipal .estiloCampos2 { font-family: 'Inter', sans-serif !important; font-size: 14px !important; color: var(--texto); background: #fff; border: 1px solid var(--linea); border-radius: 9px; padding: 9px 12px; box-sizing: border-box; transition: border-color .18s ease, box-shadow .18s ease; max-width: 100%; } #contenidoPrincipal .estiloCampos, #contenidoPrincipal .estiloCampos2 { width: 100%; } #contenidoPrincipal select { padding-right: 28px; cursor: pointer; min-width: 64px; } #contenidoPrincipal textarea { width: 100%; min-height: 96px; resize: vertical; line-height: 1.5; } #contenidoPrincipal select:focus, #contenidoPrincipal textarea:focus, #contenidoPrincipal .estiloCampos:focus, #contenidoPrincipal .estiloCampos2:focus { outline: none; border-color: var(--tierra); box-shadow: 0 0 0 3px rgba(143, 163, 24, 0.16); } /* Checkboxes con acento de marca */ #contenidoPrincipal input[type="checkbox"], #contenidoPrincipal input[type="radio"] { accent-color: var(--tierra); width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; } /* ---- Botones ----------------------------------------------------------- */ #contenidoPrincipal button { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.3px; color: #fff; background: var(--tierra); border: 1px solid var(--tierra); border-radius: 10px; padding: 11px 26px; cursor: pointer; transition: background .18s ease, transform .12s ease, box-shadow .18s ease; box-shadow: 0 6px 16px rgba(143, 163, 24, 0.22); } #contenidoPrincipal button:hover { background: var(--tierra-osc); box-shadow: 0 8px 22px rgba(143, 163, 24, 0.30); } #contenidoPrincipal button:active { transform: translateY(1px); } /* Botón "Volver" como secundario (1º de su fila) */ #extras button:first-child, #reserva button:first-child { background: #fff; color: var(--tierra-osc); border-color: var(--tierra-claro); box-shadow: none; } #extras button:first-child:hover, #reserva button:first-child:hover { background: #fafdf3; border-color: var(--tierra); } /* ---- Totales y precios ------------------------------------------------- */ #contenidoPrincipal .impuestos, #contenidoPrincipal .impuestos2 { font-family: 'Inter', sans-serif; font-size: 14px; } #contenidoPrincipal .impuestos { color: var(--tierra-osc); } #contenidoPrincipal .impuestos2 { color: var(--texto); } #contenidoPrincipal .subtotal { color: var(--tierra-osc); font-size: 18px; } #contenidoPrincipal .total { color: var(--tierra-osc); font-size: 23px; } /* Caja "Total" del primer paso */ #disponibilidad td.seleccionado { display: inline-block; background: var(--panel); color: var(--tierra-osc); border: none; border-radius: 8px; padding: 8px 16px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.3px; } /* ---- Secciones del formulario de reserva ------------------------------ */ #contenidoPrincipal .titulo_reserva { font-family: 'Playfair Display', Georgia, serif !important; font-size: 18px !important; color: var(--texto) !important; font-weight: 600 !important; padding-top: 14px; } #contenidoPrincipal .titulo_reserva hr { margin-top: 10px; border-top: 1px solid var(--tierra-claro); } #contenidoPrincipal .datos_reserva { font-family: 'Inter', sans-serif !important; font-size: 12.5px !important; color: var(--texto-suave) !important; font-weight: 500 !important; padding: 8px 12px 8px 0 !important; line-height: 1.5; } /* ---- Bloque de observaciones / nota ----------------------------------- */ #disponibilidad .extra { display: block; background: var(--panel); border: 1px solid var(--linea); border-left: 3px solid var(--tierra); border-radius: 10px; padding: 16px 20px; color: var(--texto-suave); font-size: 12.5px; font-weight: 500; line-height: 1.7; } /* ---- Loader: moderno y centrado en el viewport ------------------------ */ /* El widget genericDiv (capas.js) coloca #interior con coords calculadas y un loading.gif dentro de #carga. Se centra en pantalla y se sustituye el gif por un anillo CSS. La visibilidad la sigue controlando el JS (visibility). */ #interior { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: auto !important; height: auto !important; min-width: 0 !important; z-index: 100001 !important; } /* limpia todo el "chrome" y cajas internas del widget */ #interior, #interior * { background: transparent !important; border: 0 !important; box-shadow: none !important; color: transparent !important; } #interior img, #carga img { display: none !important; } #interior .xfTBar, #interior .xfSBar, #interior .xfSBarF, #interior .titulo_capa { display: none !important; } /* el contenedor del gif -> anillo giratorio de marca. Regla global #carga (por si el widget lo saca de #interior) + #interior #carga (para ganar a la regla #interior * que pone border:0). */ #carga, #interior #carga { display: block !important; box-sizing: border-box !important; width: 58px !important; height: 58px !important; min-width: 58px !important; padding: 0 !important; margin: 0 auto !important; border: 6px solid rgba(0, 0, 0, 0.18) !important; border-top-color: #111 !important; border-radius: 50% !important; background: transparent !important; animation: bono-spin 0.8s linear infinite !important; } @keyframes bono-spin { to { transform: rotate(360deg); } } /* Velo de fondo (loader + detrás de popups): NEUTRO, no marrón, con desenfoque. Importante: este velo (#capa/#mapa) se muestra detrás de los popups; si fuera marrón asomaría por las esquinas redondeadas de la tarjeta. */ #mapa.capa, #capa.capa, .capa { background: rgba(15, 15, 17, 0.8) !important; opacity: 1 !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* =========================================================================== POPUPS · bienvenida (#capa_previa2) y "Mejore su estancia" (#capa_previa) Centrados en viewport, tarjeta moderna, backdrop. La visibilidad la sigue controlando el JS. En móvil ocupan el 100% del viewport. =========================================================================== */ #capa_previa, #capa_previa2 { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; z-index: 100000 !important; width: auto !important; max-width: 540px !important; } /* backdrop oscuro NEUTRO detrás de cada popup (no marrón) */ #capa_previa::before, #capa_previa2::before { content: ""; position: fixed; inset: 0; border-radius: 0 !important; background: rgba(15, 15, 17, 0.8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: -1; } /* desmontar las cajas heredadas (transparentes) y construir la tarjeta */ #capa_previa > div, #capa_previa2 > div, #capa_previa > div > div > div, #capa_previa2 > div > div > div { width: auto !important; height: auto !important; padding: 0 !important; background: transparent !important; } #capa_previa > div > div, #capa_previa2 > div > div { background: #fffdfa !important; border: 1px solid var(--linea) !important; border-radius: 18px !important; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45) !important; padding: 22px !important; /* padding en los 4 lados */ overflow: hidden auto; max-height: 88vh; } #capa_previa table, #capa_previa2 table { width: 100% !important; border-collapse: collapse !important; } #capa_previa td, #capa_previa2 td { padding: 5px 2px !important; text-align: center !important; } /* imagen: inset, redondeada y con altura limitada (cabecera compacta) */ #capa_previa img, #capa_previa2 img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 165px !important; object-fit: cover !important; display: block !important; border-radius: 12px !important; margin: 0 0 8px !important; } /* tipografía: fuera la cursiva Bradley Hand; cuerpo compacto + título serif */ #capa_previa font, #capa_previa2 font { font-family: 'Inter', sans-serif !important; font-weight: 400 !important; font-size: 12px !important; line-height: 1.45 !important; color: var(--texto-suave) !important; letter-spacing: normal !important; } #capa_previa font[size="6"], #capa_previa2 font[size="6"], #capa_previa font[size="5"], #capa_previa2 font[size="5"] { font-family: 'Playfair Display', Georgia, serif !important; font-size: 18px !important; font-weight: 600 !important; color: var(--texto) !important; line-height: 1.3 !important; } /* botones del popup: estilo marca, fila con aire */ #capa_previa button, #capa_previa2 button { margin: 6px 6px 0 !important; float: none !important; width: auto !important; vertical-align: middle; } #capa_previa2 button { width: 70% !important; } /* ---- Bloque azul "seleccione fechas" (overlay JS) --------------------- */ #bloq_cap { background-color: rgba(143, 163, 24, 0.92) !important; border-radius: 16px !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 22px !important; line-height: 1.4 !important; } /* ---- Imagen de cabecera / pie: bordes coherentes con la tarjeta ------- */ #imgHeader img, #imgFooter img { display: block; } /* ---- Recaptcha submit suelto al pie ----------------------------------- */ button.g-recaptcha { display: block; margin: 28px auto 40px; font-family: 'Inter', sans-serif; font-weight: 600; color: #fff; background: var(--tierra); border: none; border-radius: 10px; padding: 12px 30px; cursor: pointer; } button.g-recaptcha:hover { background: var(--tierra-osc); } /* ========================================================================= PASO 2 · Tipo de habitación / imagen / régimen / total ========================================================================= */ /* Periodo un poco más estrecho -> el resto (incl. Observaciones) más ancho */ #disponibilidad > table > tbody > tr > td[width="33%"]:first-child { width: 30%; } /* ---- Tabla de tipos de habitación (inyectada en #roomType) ------------- */ #roomType { display: block; margin-bottom: 26px; } #roomType table { width: 100%; border-collapse: separate !important; border-spacing: 0 9px; } /* Filas (nombre de habitación) — tarjetas limpias y alineadas */ #roomType td[id^="textoTipoHabitacion"] { text-align: left !important; padding: 12px 16px !important; border: 1px solid var(--linea) !important; border-radius: 10px !important; background: #fff !important; color: var(--texto) !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; } #roomType td[id^="textoTipoHabitacion"]:hover { border-color: var(--tierra-claro) !important; background: #fafdf3 !important; } #roomType td[id^="textoTipoHabitacion"].seleccionado { background: var(--tierra) !important; border-color: var(--tierra) !important; color: #fff !important; font-weight: 600 !important; box-shadow: 0 6px 16px rgba(143, 163, 24, 0.26); } /* Precio por fila */ #roomType td.media { text-align: right !important; white-space: nowrap; padding: 12px 6px 12px 18px !important; color: var(--azul) !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; vertical-align: middle; } /* Cabecera "Precio medio por Habitación/noche" (era una caja por error) */ #roomType td.extra { display: table-cell !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 6px 6px 18px !important; text-align: right !important; color: var(--texto-suave) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.3; } /* ---- Régimen: sepáralo del bloque de habitaciones --------------------- */ #selectregimen { display: block; margin-top: 8px; } #selectregimen select { min-width: 230px; } /* ---- Imagen + descripción de la habitación (#imghab) ------------------ */ #imghab { display: block; font-family: 'Inter', sans-serif; color: var(--texto-suave); font-size: 13.5px; line-height: 1.75; } #imghab img.img, #imghab img { width: 100% !important; max-width: 440px; height: auto; border-radius: 12px; box-shadow: 0 10px 28px rgba(59, 73, 10, 0.18); margin-bottom: 14px; display: block; } /* ---- Total: todo en línea, alineado y con aire ------------------------ */ #disponibilidad td[colspan="2"] > table { margin: 10px 0; border-spacing: 0; } #disponibilidad td[colspan="2"] > table td { vertical-align: middle !important; padding: 0 !important; } #disponibilidad td.seleccionado { margin-right: 20px; } #disponibilidad #imptot { display: inline-block; font-size: 26px; font-weight: 700; color: var(--tierra-osc); padding-right: 16px; line-height: 1; } #disponibilidad td.impuestos2 { white-space: nowrap; } #disponibilidad td.impuestos2 img { vertical-align: middle; margin-left: 18px; height: 34px; width: auto; } /* ---- Observaciones: ocupa todo el ancho del bloque -------------------- */ #disponibilidad .extra { margin-top: 12px; padding: 18px 24px; } /* ---- Imágenes de los extras (Ocio / SPA / etc.) en DESKTOP ------------- */ /* Venían a 143px (atributo) y se veían enanas. Tamaño cómodo y con estilo. Solo en desktop (en móvil van a ancho completo, ver @media 680). */ @media (min-width: 681px) { #categoryWrapper #i_extras img { width: 210px !important; max-width: none !important; height: auto !important; border-radius: 10px; box-shadow: 0 8px 22px rgba(59, 73, 10, 0.16); } } /* ---- Zona de parámetros (adultos / noches / habitaciones / niños) ----- */ /* La tabla es auto-layout (el width en es solo sugerencia), así que no se puede alinear por columnas. Se linealiza: cada etiqueta en su línea y el control debajo -> todo alineado a la izquierda y consistente. */ #disponibilidad td[width="100px"] { display: block !important; width: 100% !important; padding: 12px 0 3px !important; } #disponibilidad td[align="left"], #disponibilidad td[width="250px"] { display: block !important; width: 100% !important; padding: 0 !important; } #disponibilidad div.textos { display: block; margin: 0; line-height: 1.35; } #disponibilidad #adults, #disponibilidad #noches, #disponibilidad #rooms, #disponibilidad #children, #disponibilidad #infant { margin: 2px 0; min-width: 96px; } /* la nota gris pequeña ("Si desea reservar…", "de 2 a 12 años") al lado, legible */ #disponibilidad font[size="1"] { display: inline-block; vertical-align: middle; margin-left: 12px; font-family: 'Inter', sans-serif; color: var(--texto-suave); font-size: 11.5px; line-height: 1.4; } /* Restaurar el botón "Continuar Reserva" (su celda es td[align="left"]) */ #disponibilidad td[align="left"] button { display: inline-block; width: auto; } /* ---- Responsive -------------------------------------------------------- */ /* Pantallas medianas: usa más ancho útil */ @media (max-width: 1100px) { .site_categoryList #wrapper { width: 90% !important; } #categoryWrapper { padding: 44px 40px 48px; } } /* Tablet / móvil grande: apila columnas y formularios */ @media (max-width: 920px) { .site_categoryList #wrapper { width: 94% !important; } #categoryWrapper { padding: 34px 24px 40px; border-radius: 12px; } #categoryWrapper h3.lilaCentro { font-size: 22px; } /* Popups en móvil: card grande y centrada, redondeada y con padding, ocupando casi todo el viewport (con margen para ver las esquinas). */ #capa_previa, #capa_previa2 { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 92% !important; max-width: 92% !important; height: auto !important; } #capa_previa > div, #capa_previa2 > div { height: auto !important; } #capa_previa > div > div, #capa_previa2 > div > div { height: auto !important; max-height: 90vh !important; border-radius: 16px !important; padding: 18px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } #capa_previa td, #capa_previa2 td { padding: 4px 2px !important; } #capa_previa font, #capa_previa2 font { font-size: 11.5px !important; line-height: 1.4 !important; } #capa_previa font[size="5"], #capa_previa2 font[size="5"], #capa_previa font[size="6"], #capa_previa2 font[size="6"] { font-size: 16px !important; } #capa_previa img, #capa_previa2 img { margin-bottom: 6px !important; } #capa_previa button, #capa_previa2 button { width: 92% !important; } /* Las imágenes/tablas nunca fuerzan scroll horizontal */ #contenidoPrincipal table { max-width: 100%; } /* Apila el primer bloque (#disponibilidad). Hay que poner en bloque TODAS las celdas directas (incluidas las colspan de Total/Observaciones/Continuar); si solo se bloquean las 33% el rowspan se rompe y se solapan. */ #disponibilidad > table, #disponibilidad > table > tbody, #disponibilidad > table > tbody > tr { display: block; width: 100%; } /* Las filas traen height="100px"/"5px" en el HTML; como bloque esa altura fija recorta y el contenido se desborda solapándose. Forzar auto. */ #disponibilidad > table > tbody > tr { height: auto !important; } #disponibilidad > table > tbody > tr > td { display: block; width: 100% !important; height: auto !important; box-sizing: border-box; padding: 14px 0; } #disponibilidad > table > tbody > tr > td[width="33%"] { border-bottom: 1px solid var(--linea); } /* Apila el formulario de RESERVA y de EXTRAS (resumen + campos) */ #reserva > table, #reserva > table > tbody, #reserva > table > tbody > tr, #extras > table, #extras > table > tbody, #extras > table > tbody > tr { display: block; width: 100% !important; } #reserva > table > tbody > tr > td, #extras > table > tbody > tr > td { display: block; width: 100% !important; box-sizing: border-box; padding-top: 10px; } } /* Móvil: los pares etiqueta/campo dejan de ir lado a lado */ @media (max-width: 680px) { /* Tablas internas de campos (#reserva) -> bloque, una fila por campo */ #reserva td table, #reserva td table tbody, #reserva td table tr, #reserva td table td { display: block; width: 100% !important; box-sizing: border-box; } /* --- Paso EXTRAS: widget muy anidado (pestañas + items con foto). En móvil se linealiza TODO el contenido inyectado para evitar solapes y desalineos. El height="350px" fijo y las imágenes flotadas eran la causa del caos. --- */ #i_extras table, #i_extras tbody, #i_extras tfoot, #i_extras tr, #i_extras td, #i_extras fieldset { display: block !important; width: 100% !important; height: auto !important; box-sizing: border-box; } #i_extras fieldset { border: 1px solid var(--linea); border-radius: 10px; background: #fff; padding: 12px 14px; margin: 10px 0; } #i_extras img { float: none !important; display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 10px 0; border-radius: 10px; } /* La descripción y notas, legibles y sin solaparse */ #i_extras .text, #i_extras .extra { display: block; margin: 4px 0; } /* Pestañas (Pequeños detalles / Ocio / SPA): que envuelvan limpio */ #i_extras .menu { float: none; overflow: hidden; margin-bottom: 6px; } #i_extras .menu ul { display: flex; flex-wrap: wrap; gap: 6px; } #i_extras .menu ul li { float: none !important; margin: 0 !important; } /* Selects de extras a ancho cómodo */ #i_extras select { width: 100% !important; max-width: 280px; } /* Etiquetas alineadas a la izquierda encima del campo */ #reserva td[align="right"], #extras td[align="right"], #reserva .datos_reserva, #extras .datos_reserva { text-align: left !important; padding: 6px 0 2px !important; } #contenidoPrincipal .estiloCampos, #contenidoPrincipal .estiloCampos2, #contenidoPrincipal select, #contenidoPrincipal textarea { width: 100% !important; } /* Tabla de parámetros (adultos/noches/habitaciones) apilada */ #disponibilidad td[width="100px"] { display: block; width: 100% !important; padding-top: 6px; } /* Botones a ancho completo y apilados */ #contenidoPrincipal button { width: 100%; margin: 6px 0; } #reserva td[colspan="3"], #extras td[colspan] { text-align: left !important; } } @media (max-width: 480px) { .site_categoryList #wrapper { width: 100% !important; } #contenidoPrincipal { padding: 16px 0 32px; } #categoryWrapper { padding: 24px 14px 30px; border-radius: 10px; } #categoryWrapper h3.lilaCentro { font-size: 20px; } td[id^="r_per"] { font-size: 13.5px !important; padding: 12px 14px !important; } }