:root { --vilok-primary: #FD3977; --vilok-dark: #2b2d42; /* T50.2 — Borde estándar de la web. No es un gris nuevo: es exactamente el que ya usaban las tarjetas .sec de la ficha, ahora con nombre. Se declara aquí para que la línea separadora y el borde de la tarjeta no puedan separarse nunca; una excepción suelta en el CSS es lo que hace que dentro de seis meses haya tres grises distintos. */ --vilok-border: #e8e5e0; } /* ── T51 · Bloque "Cómo funciona la reserva" (solo home) ───────────────────── Tres columnas iguales sobre fondo gris muy claro, con separadores verticales. En móvil se apilan y los separadores verticales DESAPARECEN: un separador vertical entre bloques apilados no separa nada. La división se marca con una línea horizontal fina del mismo color. */ .hf-seccion { background: #f7f6f4; } .hf-titulo-bloque{ text-transform: uppercase; letter-spacing: .04em; } .hf-paso { padding: 0 1.5rem; } .hf-paso + .hf-paso { border-left: 1px solid var(--vilok-border); } .hf-num { color: #FF577A; font-weight: 800; } .hf-paso h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; } .hf-paso p { color: #6c757d; font-size: .9rem; margin: 0; } @media (max-width: 991.98px) { .hf-paso { padding: 1.5rem 0; } .hf-paso + .hf-paso { border-left: 0; border-top: 1px solid var(--vilok-border); } } body { font-family: 'Poppins', sans-serif; color: var(--vilok-dark); } /* ── T57 · El pie al fondo en las páginas cortas ───────────────────────────── * * En login.php, en el registro, en los avisos legales y en las páginas de error el * contenido no llena la ventana y bajo el pie quedaba una franja blanca hasta el borde. * * Se arregla en la PLANTILLA, no en cada página: la V48 confirmó que hay una sola * cabecera pública (includes/head.php) y un solo pie (includes/footer.php), que los usan * las catorce páginas públicas y las catorce usan los dos. El envoltorio lo abre la * cabecera y lo cierra el pie. * * El contenido crece para ocupar lo que sobre y el pie queda detrás: cuando la página es * corta baja hasta el fondo, y cuando es larga se comporta como siempre. Nada de * position:fixed, ni absolute, ni margin-top negativo: las tres se rompen en cuanto el * contenido crece. * * 57.3 — Los paneles de anfitrión y de admin NO usan esta plantilla (montan su propio * y no incluyen el pie), así que esta tarea no los toca: en un panel con menú * lateral a pantalla completa el problema no se da igual. */ .vilok-page { display: flex; flex-direction: column; /* 57.2 — Las dos, y en este orden. En el móvil, 100vh cuenta la ventana SIN descontar la barra de direcciones, que aparece y desaparece al hacer scroll: con 100vh a secas la página queda más alta que la pantalla y hay que hacer scroll para ver el pie de una página que cabía entera. El navegador que no entienda dvh se queda con la primera; el que sí, usa la segunda. */ min-height: 100vh; min-height: 100dvh; } .vilok-page-main { flex: 1 0 auto; } .vilok-page > .vilok-footer { flex-shrink: 0; } .text-primary { color: var(--vilok-primary) !important; } .btn-primary { background: var(--vilok-primary); border-color: var(--vilok-primary); } .btn-primary:hover { background: #c4314f; border-color: #c4314f; } .btn-outline-primary { color: var(--vilok-primary); border-color: var(--vilok-primary); } .btn-outline-primary:hover { background: var(--vilok-primary); color: #fff; } /* Navbar público — móvil */ @media (max-width: 991.98px) { /* Z-index alto para que el navbar (y su collapse expandido) quede por encima de todo */ .navbar { position: relative !important; z-index: 1060 !important; } /* Fondo y estilo al menú expandido */ .navbar .navbar-collapse { background: var(--vilok-dark); padding: .5rem .25rem; border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.35); margin-top: .25rem; } .navbar .navbar-collapse .nav-link, .navbar .navbar-collapse .btn { margin-bottom: .25rem; } } /* Navbar transparente (solo portada) */ .navbar-transparent { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1060; background: transparent !important; background-color: transparent !important; box-shadow: none !important; border: none !important; } /* Hero con vídeo. * * T37 — El bloque de título, subtítulo y buscador estaba demasiado arriba dentro de la * imagen: quedaba pegado a la cabecera y tapaba el centro de la fotografía. * * 37.2 — Se baja con una posición RELATIVA a la altura de la imagen (vh y flexbox), no * con un valor fijo en píxeles: un valor fijo cuadra en el ordenador y se descoloca en * el teléfono. * 37.3 — El alto máximo del hero se limita a 92vh y el contenido se centra dentro, así * que el buscador entra completo sin hacer scroll. La media query de pantallas bajas * (portátil pequeño, móvil apaisado) recorta el desplazamiento para que el botón * "Buscar" no se salga nunca. * 37.4 — No se toca nada más: mismos textos, mismos tamaños, misma imagen. */ .hero { position: relative; color: #fff; overflow: hidden; min-height: 92vh; background-color: var(--vilok-dark); display: flex; flex-direction: column; justify-content: center; /* El padding superior extra es lo que baja el bloque respecto al centro. */ padding: 16vh 0 6vh; } /* Pantallas muy bajas: se recorta el desplazamiento antes que dejar el buscador fuera. */ @media (max-height: 620px) { .hero { min-height: 100vh; padding: 9vh 0 4vh; } } .hero-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.50); z-index: 1; } .hero .container { position: relative; z-index: 2; } .hero h1 { font-size: 2.6rem; font-weight: 700; } @media (max-width: 767.98px) { /* Mismo criterio en móvil: proporción, no píxeles. El buscador se apila en vertical y ocupa más, así que el desplazamiento es menor. */ .hero { padding: 12vh 0 6vh; min-height: 88vh; } .hero h1 { font-size: 1.8rem; } } /* Navbar links totalmente blancos en modo transparente */ .navbar-transparent .nav-link, .navbar-transparent .nav-link:hover, .navbar-transparent .nav-link:focus { color: #fff !important; opacity: 1 !important; } /* Buscador hero estilo vilok */ .hero-search { display: flex; align-items: stretch; background: #fff; border-radius: 12px; overflow: visible; box-shadow: 0 8px 40px rgba(0,0,0,.25); max-width: 860px; } .hs-field { display: flex; align-items: center; flex: 1; padding: 0 16px; border-right: 1px solid #e0e0e0; position: relative; min-width: 0; } .hs-field:last-of-type { border-right: none; } .hs-icon { color: var(--vilok-primary); font-size: 1.1rem; margin-right: 10px; flex-shrink: 0; } .hs-input { border: none; outline: none; width: 100%; font-family: 'Poppins', sans-serif; font-size: .9rem; color: var(--vilok-dark); padding: 18px 0; background: transparent; } .hs-input::placeholder { color: #777; } .hs-input[type="date"]::-webkit-calendar-picker-indicator { opacity: .4; cursor: pointer; } /* Dropdown ciudades */ .hs-dropdown-wrap { cursor: pointer; } .hs-dropdown { display: flex; align-items: center; gap: 8px; padding: 18px 0; user-select: none; width: 100%; } .hs-dropdown-label { font-family: 'Poppins', sans-serif; font-size: .9rem; color: var(--vilok-dark); flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hs-dropdown-label.placeholder { color: #aaa; } .hs-caret { font-size: .7rem; color: #aaa; flex-shrink: 0; } .hs-dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: -16px; min-width: 220px; background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.15); list-style: none; padding: 8px 0; margin: 0; z-index: 500; /* T125 (2ª pasada) — `.hero` tiene overflow:hidden, así que un desplegable más alto que lo que queda de hero se cortaba por abajo: con 12 ciudades solo se veían 5 y el toque en las de abajo caía en la sección de detrás. Con tope de alto la lista hace scroll dentro de sí misma y nunca se sale del hero. */ max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .hs-dropdown-menu.open { display: block; } .hs-dropdown-menu li { padding: 10px 18px; font-size: .88rem; cursor: pointer; color: var(--vilok-dark); transition: background .15s; text-align: left; } .hs-dropdown-menu li:hover { background: #f5f5f5; } .hs-dropdown-menu li.selected { font-weight: 600; color: var(--vilok-primary); } .hs-count { color: #aaa; font-size: .82rem; } /* Botón buscar */ .hs-btn { background: var(--vilok-primary); color: #fff; border: none; border-radius: 0 12px 12px 0; padding: 0 28px; font-family: 'Poppins', sans-serif; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .2s; white-space: nowrap; flex-shrink: 0; } .hs-btn:hover { background: #c4314f; } @media (max-width: 768px) { .hero-search { flex-direction: column; border-radius: 12px; } .hs-field { border-right: none; border-bottom: 1px solid #e0e0e0; } .hs-btn { border-radius: 0 0 12px 12px; padding: 16px; } .hs-dropdown-menu { left: 0; min-width: 100%; } } /* Tarjetas de listado */ .listing-card { transition: transform .2s, box-shadow .2s; border: none; border-radius: 12px; overflow: hidden; } .listing-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,.12); } .listing-card img { height: 220px; object-fit: cover; border-radius: 10px 10px 0 0; } .badge-tipo { background: var(--vilok-primary); font-size: .72rem; } /* Sección ¿Por qué elegir Vílok? */ .vilok-why-section { background: #f8f9fa; } .vilok-feature-card { background: #fff; transition: transform .2s, box-shadow .2s; } .vilok-feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(253, 57, 119, 0.12) !important; } .vilok-feature-icon { color: #FD3977; font-size: 3.2rem; line-height: 1; display: block; text-align: center; margin-bottom: 1rem; } /* Sección Tu momento — use case cards */ .vilok-usecase-card { background: #fff; border-top: 4px solid #FD3977; text-align: center; transition: transform .2s, box-shadow .2s; } .vilok-usecase-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(253, 57, 119, 0.12) !important; } .vilok-usecase-icon { color: #FD3977; font-size: 3.6rem; line-height: 1; display: block; padding-top: 2rem; padding-bottom: 1rem; text-align: center; } /* Páginas legales */ .legal-header { background: var(--vilok-dark); color: #fff; padding: 60px 0 40px; margin-top: 0; } .legal-header .legal-brand { color: #FD3977; font-weight: 600; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; display: block; margin-bottom: .5rem; } .legal-header h1 { font-size: 2.2rem; font-weight: 800; margin-bottom: .4rem; } .legal-header p { color: rgba(255,255,255,.6); margin: 0; } .legal-content { max-width: 840px; margin: 0 auto; padding: 48px 20px 80px; } .legal-toc { background: #f8f9fa; border-radius: 12px; padding: 1.5rem 2rem; margin-bottom: 3rem; } .legal-toc h6 { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #FD3977; margin-bottom: .75rem; } .legal-toc ol { margin: 0; padding-left: 1.4rem; } .legal-toc li { margin-bottom: .3rem; font-size: .9rem; } .legal-toc a { color: var(--vilok-dark); text-decoration: none; } .legal-toc a:hover { color: #FD3977; } .legal-content h2 { font-size: 1.05rem; font-weight: 700; color: #fff; margin-top: 2.5rem; margin-bottom: 1rem; padding: .65rem 1.1rem; background: var(--vilok-dark); border-radius: 8px; } .legal-content h3 { font-size: 1rem; font-weight: 700; margin-top: 1.75rem; margin-bottom: .6rem; color: var(--vilok-dark); padding-bottom: .3rem; border-bottom: 2px solid #FD3977; display: inline-block; } .legal-content p { line-height: 1.85; color: #3a3a3a; margin-bottom: 1rem; font-size: .95rem; } .legal-content ul, .legal-content ol { padding-left: 1.4rem; margin-bottom: 1rem; } .legal-content li { margin-bottom: .4rem; line-height: 1.75; color: #3a3a3a; font-size: .95rem; } .legal-content .nota-importante { background: rgba(253, 57, 119, 0.07); border-left: 4px solid #FD3977; border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: .9rem; } .legal-content .nota-importante strong { color: #FD3977; } .legal-content table { font-size: .875rem; width: 100%; margin-bottom: 1.5rem; } .legal-content thead th { background: var(--vilok-dark); color: #fff; padding: .6rem 1rem; } .legal-content tbody td { padding: .55rem 1rem; border-bottom: 1px solid #eee; } .legal-content tbody tr:nth-child(even) td { background: #f9f9f9; } .legal-footer-note { border-top: 1px solid #eee; margin-top: 3rem; padding-top: 1.25rem; color: #999; font-size: .85rem; } .legal-section-label { text-align: center; background: #f0f0f0; color: #555; font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; padding: .5rem; border-radius: 6px; margin: 2.5rem 0 1.5rem; } /* Pasos numerados en guías */ .guide-step { display: flex; gap: 1.25rem; margin-bottom: 2rem; align-items: flex-start; } .guide-step-num { background: var(--vilok-primary); color: #fff; font-weight: 800; font-size: 1rem; border-radius: 10px; min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; } .guide-step h3 { margin-top: 0; } /* Footer */ .vilok-footer { background: var(--vilok-dark); color: rgba(255,255,255,.75); font-size: .9rem; overflow: hidden; } .vilok-footer-desc { color: rgba(255,255,255,.55); line-height: 1.7; font-size: .875rem; } .vilok-footer-heading { color: #fff; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.1rem; } .vilok-footer-links { list-style: none; padding: 0; margin: 0; } .vilok-footer-links li { margin-bottom: .55rem; } .vilok-footer-links a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; } .vilok-footer-links a:hover { color: #FD3977; } .vilok-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.25rem 0; color: rgba(255,255,255,.35); font-size: .8rem; } /* Panel anfitrión / admin */ .sidebar { width: 240px; min-width: 220px; max-width: 240px; background: var(--vilok-dark); font-size: .82rem; position: sticky; top: 0; height: 100vh; overflow: hidden; flex-shrink: 0; } /* T125 (2ª pasada) — Bootstrap trae `.nav { flex-wrap: wrap }`. Con el menú en columna y el alto del sidebar limitado (overflow:hidden), lo que no cabe NO hace scroll: se envuelve a una segunda columna que queda fuera de los 240 px y por tanto invisible. En el panel de admin, con 19 enlaces, eso dejaba "Cerrar sesión" inalcanzable. Los tres paneles comparten este patrón. */ .sidebar nav.nav { min-height: 0; flex-wrap: nowrap; } /* Y sin encogerse: en un flex en columna con overflow, lo que no cabe se comprime antes que desbordar, y 19 enlaces aplastados dejan el texto cortado. Con esto lo que sobra se va abajo y el menú hace scroll, que es lo que se espera. */ .sidebar nav.nav > * { flex-shrink: 0; } .sidebar .nav-link { color: rgba(255,255,255,.75); border-radius: 8px; padding: 8px 14px; font-size: .82rem; } .sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff; background: var(--vilok-primary); } .sidebar .nav-link i { width: 20px; } /* Barra superior móvil (hamburguesa) */ .panel-mobile-bar { position: fixed; /* T168.1 — Aquí estaba la superposición: esta barra y la de impersonación empezaban las dos en top:0 y la segunda tapaba a la primera entera, botón de menú incluido. Ahora arranca donde acaba la de impersonación. --vilok-imp la publica anfitrion/sidebar.php midiendo la barra de verdad; cuando no hay impersonación la variable no existe, el 0px de reserva entra en juego y esto queda como siempre. */ top: var(--vilok-imp, 0px); left: 0; right: 0; /* T168.7 — min-height y no height: es la última altura de barra que quedaba escrita a fuego. Si algún día el contenido pide dos líneas, la barra crece y el medidor de sidebar.php publica la altura nueva; nadie tiene que acordarse de tocar un 56. */ min-height: 56px; background: var(--vilok-dark); display: flex; align-items: center; padding: 0 1rem; z-index: 1040; gap: .75rem; } .panel-hamburger { background: none; border: none; color: #fff; font-size: 1.6rem; line-height: 1; padding: 0 4px; cursor: pointer; flex-shrink: 0; } .panel-mobile-brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1rem; flex: 1; } .sidebar-overlay { display: none; position: fixed; /* T168.1 — El velo empieza debajo del aviso de impersonación: taparlo con un 50 % de negro haría ilegible justo lo que más se tiene que ver. */ inset: var(--vilok-imp, 0px) 0 0 0; background: rgba(0,0,0,.5); z-index: 1045; } .sidebar-overlay.open { display: block; } @media (max-width: 767.98px) { .sidebar { position: fixed !important; left: -260px; /* T168.1 — El cajón del menú también es fijo: sin esto, con la impersonación activa su cabecera quedaba debajo de la barra de aviso. */ top: var(--vilok-imp, 0px); z-index: 1050; height: calc(100vh - var(--vilok-imp, 0px)); height: calc(100dvh - var(--vilok-imp, 0px)); width: 240px !important; min-width: 240px !important; max-width: 240px !important; transition: left .25s ease; } .sidebar.open { left: 0 !important; } .panel-content { /* T168.3 — La compensación deja de ser un 56 escrito a mano. --vilok-barra-movil la publica la propia barra al medirse; el 56px es solo el valor de reserva. La altura de la barra de impersonación NO se suma aquí: ya la descuenta el padding-top del , y sumarla otra vez dejaría un hueco del doble. */ padding-top: calc(var(--vilok-barra-movil, 56px) + 1rem) !important; padding-left: 1rem !important; padding-right: 1rem !important; padding-bottom: 2rem !important; width: 100% !important; } .panel-content > .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; gap: .5rem; } } @media (min-width: 768px) { .panel-mobile-bar { display: none !important; } .sidebar-overlay { display: none !important; } } /* ── Mensajería privada en móvil (T125, 2ª pasada) ─────────────────────────── La lista de conversaciones es `width:300px; flex-shrink:0`. A 390 px de ancho eso deja el panel del chat en 92 px: no se lee ningún mensaje y el campo de escribir no cabe. En móvil no caben las dos columnas a la vez, así que se enseña UNA: la lista si no hay conversación abierta, y el chat si la hay. Lo decide la clase `chat-abierto` del , que las dos pantallas de mensajes ponen cuando la URL trae ?conv=. El enlace de volver es un enlace normal a la misma página sin ?conv=, no JavaScript. */ .chat-volver { display: none; } @media (max-width: 767.98px) { .chat-wrap { flex-direction: column; overflow: visible !important; } .chat-col-list { width: 100% !important; border-right: 0 !important; } .chat-col-chat { width: 100%; min-width: 0; } body.chat-abierto .chat-col-list { display: none !important; } body:not(.chat-abierto) .chat-col-chat { display: none !important; } body.chat-abierto .chat-volver { display: inline-flex !important; } /* Con `body` delante a propósito: las dos pantallas de mensajes traen su propio