/* Prolift · formularios W12 1.0 (25-oct-2026, revisión final; paquete prolift_w12_formularios). Va DESPUÉS de maquetacion.css. Un solo componente de formulario (diseño M1): etiqueta encima, asterisco DETRÁS, ayudas a 14 px en tinta-2, campos de 44 px; alta en dos columnas (máx. 800 px) con su panel; acceso, foto y contacto en la rejilla de «Pedir presupuesto»; botón de fichero propio (diseño M2); «Mostrar» la contraseña (marketing M9); aire bajo «Los campos con *…» (diseño B8); migas del móvil sin una línea que empiece por el separador (diseño B9); teléfono del alta con el borde de los demás (diseño B3); contacto directo con el número una vez (redactor R-29); salidas de la confirmación (marketing M7). Solo tokens de maquetacion.css (--pm-*): rojo solo en el botón que envía; toques ≥ 44 px. */ /* ---------------------------------------------------------------- asterisco, siempre detrás */ #content .required .control-label::before, #content .form-group.required > .control-label::before { content: none !important; } #content .required .control-label::after, #content .form-group.required > .control-label::after { content: " *" !important; color: var(--pm-tinta-2) !important; font-weight: 500; } /* ---------------------------------------------------------------- «Los campos con * son obligatorios.», con aire */ #content .pl-form > .pl-form__nota, #content .pl-form > form > .pl-form__nota { margin: 0 0 24px !important; } /* ---------------------------------------------------------------- alta: dos columnas y su panel */ #account-register .pl-alta .account-register { max-width: 800px; } #account-register .pl-alta .form-group { margin-left: 0; margin-right: 0; } #account-register .pl-alta .form-group > [class*="col-sm-"] { width: 100%; float: none; padding-left: 0; padding-right: 0; } #account-register .pl-alta .form-group > label.col-sm-2:empty { display: none; } @media (min-width: 768px) { #account-register .pl-alta .account-register__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; } #account-register .pl-alta .account-register__form > .form-group, #account-register .pl-alta .account-register__form > input { grid-column: 1 / -1; } #account-register .pl-alta .account-register__form > .form-group:has(#input-firstname), #account-register .pl-alta .account-register__form > .form-group:has(#input-lastname), #account-register .pl-alta .account-register__form > #custom-field8, #account-register .pl-alta .account-register__form > #custom-field7, #account-register .pl-alta .account-register__form > .form-group:has(#input-telephone), #account-register .pl-alta .account-register__form > .form-group:has(#input-email), #account-register .pl-alta .account-register__form > .form-group:has(#input-password) { grid-column: auto; } } #account-register #input-telephone, #account-register .pl-alta__tel { border-color: var(--pm-linea-f) !important; } /* ---------------------------------------------------------------- «Mostrar» la contraseña, dentro del campo */ .pl-clave { position: relative; } #content .pl-clave > input { padding-right: 104px !important; } .pl-clave__ver { position: absolute; top: 0; right: 0; bottom: 0; min-width: 96px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; font: 700 14px/1 var(--pm-letra); color: var(--pm-tinta); text-decoration: underline; cursor: pointer; } .pl-clave__ver:focus-visible { outline: 3px solid var(--pm-foco); outline-offset: -3px; } /* ---------------------------------------------------------------- acceso en la rejilla */ .pl-acceso .account-login__wrapper { padding: 0 !important; border: 0 !important; background: transparent !important; } .pl-acceso .pl-form-panel .account-login__btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; } #content .pl-acceso .account-login__heading { font-size: 22px !important; } #content .pl-acceso .pl-form-panel__titulo { font-size: 18px !important; } @media (max-width: 767px) { #content .pl-acceso .account-login__heading { font-size: 20px !important; } } /* ---------------------------------------------------------------- botón de fichero propio (foto y presupuestos) */ .pl-fichero { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 44px; } #content .pl-fichero__input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0 !important; cursor: pointer; z-index: 1; font-size: 0; } .pl-fichero__boton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--pm-linea-f); border-radius: 8px; background: #fff; color: var(--pm-tinta); font: 500 16px/1 var(--pm-letra); } .pl-fichero__boton svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pl-fichero__nombre { font-size: 14px; line-height: 1.4; color: var(--pm-tinta-2); overflow-wrap: anywhere; } .pl-fichero:hover .pl-fichero__boton { border-color: var(--pm-tinta); } .pl-fichero:focus-within .pl-fichero__boton { outline: 3px solid var(--pm-foco); outline-offset: 2px; } /* ---------------------------------------------------------------- foto: errores, aviso y el icono separado del texto */ .pl-foto__error { margin: 4px 0 0; color: var(--pm-error); font-size: 14px; font-weight: 500; } .pl-foto__error:empty { display: none; } .pl-foto__error--general { margin: 0 0 12px; } .pl-foto__enviar, .pl-form__enviar:has(svg) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .pl-foto__enviar svg, .pl-form__enviar svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pl-foto-vacio .fa { margin-right: 8px; } #pl-foto-pagina .pl-form__trampa { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- contacto directo del panel: el número una vez y dos botones */ #content .pl-form-panel__tel, .pl-form-panel__tel { margin: 0 0 12px !important; font: 500 16px/1.4 var(--pm-letra) !important; color: var(--pm-tinta) !important; } .pl-form-panel__botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .pl-form-panel__boton { flex: 1 1 auto; } .pl-form-panel__boton svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ---------------------------------------------------------------- confirmación de los formularios: sus salidas */ .pl-salidas { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; } .pl-salidas ~ .buttons, .pl-salidas ~ div[style*="height:25px"] { display: none !important; } #content .pl-exito-foto { color: var(--pm-tinta-2); } /* ---------------------------------------------------------------- migas del móvil (formularios e información) */ @media (max-width: 767px) { body:has(.pl-rejilla) .breadcrumb > li + li::before { content: none !important; padding: 0 !important; } body:has(.pl-rejilla) .breadcrumb > li:not(:last-child)::after { content: "\f101"; padding: 0 5px 0 3px; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .75em; color: var(--pm-tinta-2); } body:has(.pl-rejilla) .breadcrumb > li { white-space: nowrap; } }