/* Loiacono Reservas — estilos del front. Todo va bajo .lpr-scope para no chocar con el tema. Hereda Catamaran, que ya carga el sitio. */ .lpr-scope{ --lpr-ink:#2d3333; --lpr-gold:#ffd400; --lpr-gold-soft:#ffd21d; --lpr-gold-tint:#fff6cf; --lpr-gold-ink:#4a3f10; --lpr-red:#dd3333; --lpr-red-dark:#b82a2a; --lpr-red-tint:#fbeaea; --lpr-bg:#f5f5f5; --lpr-surface:#fff; --lpr-border:#e3e3e3; --lpr-border-soft:#ececec; --lpr-text:#3d4142; --lpr-muted:#767b7c; --lpr-faint:#a9adae; --lpr-radius:4px; --lpr-radius-lg:6px; font-family:'Catamaran','Segoe UI',system-ui,-apple-system,sans-serif; color:var(--lpr-text); line-height:1.5; box-sizing:border-box; } /* Forzamos la tipografía en todo el widget para que no se filtren fuentes del tema (ej. monoespaciada del contenido de la propiedad). */ .lpr-scope,.lpr-scope h2,.lpr-scope h3,.lpr-scope h4,.lpr-scope p,.lpr-scope div, .lpr-scope span,.lpr-scope a,.lpr-scope label,.lpr-scope input,.lpr-scope select, .lpr-scope button,.lpr-scope strong{ font-family:'Catamaran','Segoe UI',system-ui,-apple-system,sans-serif; } .lpr-scope *,.lpr-scope *::before,.lpr-scope *::after{ box-sizing:border-box; } .lpr-scope h2,.lpr-scope h3,.lpr-scope h4{ color:var(--lpr-ink); margin:0; font-family:inherit; line-height:1.25; } .lpr-scope a{ color:inherit; } /* ---------- menú ---------- */ .lpr-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--lpr-red); } .lpr-menu-hero{ margin-bottom:22px; } .lpr-menu-hero h2{ font-size:1.8rem; font-weight:800; margin:6px 0 8px; } .lpr-menu-hero p{ color:var(--lpr-muted); margin:0; max-width:60ch; } .lpr-empty{ color:var(--lpr-muted); padding:24px 0; } .lpr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; } .lpr-card{ background:var(--lpr-surface); border:1px solid var(--lpr-border-soft); border-radius:var(--lpr-radius-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(45,51,51,.06), 0 8px 20px -12px rgba(45,51,51,.18); transition:transform .18s ease, box-shadow .18s ease; } .lpr-card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -14px rgba(45,51,51,.32); } .lpr-card-photo{ position:relative; display:block; height:150px; background:#dfe3e3 center/cover no-repeat; text-decoration:none; } .lpr-tag{ position:absolute; top:10px; left:10px; background:var(--lpr-red); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:3px; } .lpr-card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1; } .lpr-card-addr{ font-size:1rem; font-weight:700; color:var(--lpr-ink); text-decoration:none; line-height:1.3; } .lpr-card-addr:hover{ color:var(--lpr-red); } /* Barra oscura con el precio, como las tarjetas nativas del sitio. */ .lpr-card-price{ margin:0 -16px; padding:8px 16px; background:var(--lpr-ink); color:#ffffff; font-weight:800; font-size:1.1rem; line-height:1.2; } /* Franja mostaza con iconitos (m², ambientes, baños), como en el sitio. */ .lpr-card-meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:0 -16px; padding:9px 16px; background:var(--lpr-gold-soft); font-size:.8rem; color:var(--lpr-gold-ink); font-weight:700; } .lpr-card-meta span{ display:inline-flex; align-items:center; gap:5px; } .lpr-card-meta svg{ width:15px; height:15px; stroke:var(--lpr-gold-ink); fill:none; flex:none; } /* Forzamos color de texto: el tema pinta los de rojo dentro del contenido, y el botón "Reservar visita" quedaba con letra roja sobre fondo rojo. */ .lpr-card-book{ margin-top:auto; text-align:center; text-decoration:none !important; background:var(--lpr-red) !important; color:#ffffff !important; font-size:.9rem; font-weight:700; padding:11px 12px; border-radius:var(--lpr-radius); transition:background .15s ease; } .lpr-card-book:hover,.lpr-card-book:focus,.lpr-card-book:visited{ background:var(--lpr-red-dark) !important; color:#ffffff !important; } /* ---------- app de reserva ---------- */ .lpr-app{ margin:28px 0; } .lpr-layout{ display:grid; grid-template-columns:minmax(240px,330px) 1fr; background:var(--lpr-surface); border:1px solid var(--lpr-border-soft); border-radius:var(--lpr-radius-lg); overflow:hidden; } @media (max-width:782px){ .lpr-layout{ grid-template-columns:1fr; } } .lpr-info{ padding:24px; display:flex; flex-direction:column; gap:18px; background:var(--lpr-bg); border-right:1px solid var(--lpr-border-soft); } @media (max-width:782px){ .lpr-info{ border-right:none; border-bottom:1px solid var(--lpr-border-soft); } } .lpr-agent{ display:flex; align-items:center; gap:10px; } .lpr-avatar{ width:46px; height:46px; border-radius:50%; background:var(--lpr-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; flex:none; overflow:hidden; } /* El logo (ícono solo, sin texto) se muestra completo dentro del círculo. */ .lpr-avatar-img{ background:#fff; border:1px solid var(--lpr-border); padding:6px; } .lpr-avatar-img img{ width:100%; height:100%; object-fit:contain; display:block; } .lpr-agent-name{ font-size:.85rem; font-weight:700; color:var(--lpr-ink); } .lpr-agent-role{ font-size:.72rem; color:var(--lpr-muted); } .lpr-title{ font-size:1.25rem; font-weight:800; color:var(--lpr-ink); line-height:1.25; } .lpr-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .lpr-pill{ font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:20px; } .lpr-pill-rent{ background:var(--lpr-red-tint); color:var(--lpr-red-dark); } .lpr-pill-dur{ background:var(--lpr-gold-tint); color:var(--lpr-gold-ink); } .lpr-req{ font-size:.85rem; background:var(--lpr-surface); border:1px solid var(--lpr-border-soft); border-left:3px solid var(--lpr-red); border-radius:0 var(--lpr-radius) var(--lpr-radius) 0; padding:12px 14px; line-height:1.55; } .lpr-req strong{ color:var(--lpr-ink); } .lpr-book{ padding:24px 26px; } .lpr-book-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .lpr-book-head h3{ font-size:1.05rem; font-weight:800; } .lpr-book-head span{ font-size:.78rem; color:var(--lpr-muted); font-weight:600; } .lpr-note{ background:var(--lpr-gold-tint); border:1px solid #f1e4a4; border-radius:var(--lpr-radius); padding:11px 13px; font-size:.84rem; color:var(--lpr-gold-ink); line-height:1.5; margin-bottom:18px; } .lpr-note strong{ color:var(--lpr-ink); } /* ---------- calendario ---------- */ /* Más compacto en ancho (no ocupa toda la columna) pero con números grandes y legibles dentro de cada día. */ .lpr-cal{ min-height:60px; max-width:300px; margin:0 auto; } .lpr-cal-status{ color:var(--lpr-muted); font-size:.9rem; padding:14px 0; } .lpr-cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .lpr-cal-nav strong{ font-size:1rem; color:var(--lpr-ink); text-transform:capitalize; } .lpr-cal-nav button{ width:30px; height:30px; border-radius:50%; border:1px solid var(--lpr-border); background:var(--lpr-surface); color:var(--lpr-muted); cursor:pointer; font-size:1.2rem; line-height:1; } .lpr-cal-nav button:disabled{ opacity:.35; cursor:default; } .lpr-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; } .lpr-dow{ font-size:.72rem; font-weight:700; color:var(--lpr-faint); text-transform:uppercase; padding-bottom:2px; } .lpr-cal-empty{ aspect-ratio:1; } .lpr-cal-day{ position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:1.05rem; font-weight:700; border-radius:50%; border:1px solid transparent; background:none; color:var(--lpr-text); cursor:pointer; font-family:inherit; } .lpr-cal-day.is-off{ color:#d4d6d6; cursor:default; } .lpr-cal-day.is-avail:hover{ background:var(--lpr-red-tint); } .lpr-cal-day.is-avail::after{ content:""; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:var(--lpr-red); } .lpr-cal-day.is-selected{ background:var(--lpr-red); color:#fff; } .lpr-cal-day.is-selected::after{ display:none; } /* ---------- slots ---------- */ .lpr-slots-label{ font-size:.8rem; font-weight:700; color:var(--lpr-ink); margin:16px 0 8px; text-transform:capitalize; } .lpr-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:8px; } .lpr-slot{ border:1px solid var(--lpr-border); background:var(--lpr-surface); color:var(--lpr-text); font-size:.85rem; font-weight:600; padding:9px 6px; border-radius:var(--lpr-radius); cursor:pointer; font-family:inherit; } .lpr-slot:hover{ border-color:var(--lpr-red); color:var(--lpr-red-dark); } .lpr-slot.is-selected{ background:var(--lpr-ink); border-color:var(--lpr-ink); color:#fff; } /* ---------- formulario ---------- */ .lpr-form{ margin-top:20px; padding-top:20px; border-top:1px solid var(--lpr-border-soft); } .lpr-form-chip{ display:inline-flex; align-items:center; gap:7px; background:#e9f5ef; color:#2e7d5b; font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:20px; margin-bottom:16px; } .lpr-form-chip::before{ content:"✓"; font-weight:800; } .lpr-fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:520px){ .lpr-fields{ grid-template-columns:1fr; } } .lpr-field{ display:flex; flex-direction:column; gap:5px; } .lpr-field.lpr-full{ grid-column:1/-1; } .lpr-field label{ font-size:.78rem; font-weight:700; color:var(--lpr-ink); } .lpr-field label sup{ color:var(--lpr-red); } /* Forzamos tamaño y color de letra con !important: en algunos temas (RealHomes) los estilos globales de formularios dejan el texto de los