/* PP Design System v3.1 — components.css (Fase 3, Tarea 12). Capa de componentes base .pp-* que CONSUME los tokens de tokens.css. Mobile First: la base es movil; las mejoras usan min-width. Sin copy en content:. Nombres BEM pp-*, sin IDs ni cadenas globales (body:not(...) *). !important solo en puentes documentados contra v2/Adifier (Registro §Puentes), retiro en Fase 7 (antes de 2027-01-31); rollback = apagar flags v3. */ /* ============================================================ 1) TIPOGRAFIA base de componentes (jerarquia v3 §5.4) Se aplica solo a helpers .pp-* para no tocar markup de terceros. ============================================================ */ html[data-pp-theme] .pp-title, html[data-pp-theme] .pp-text{font-family:var(--pp-font-ui);color:var(--pp-text);} html[data-pp-theme] .pp-title{font-weight:var(--pp-font-weight-heading);line-height:1.2;margin:0 0 .5em;} html[data-pp-theme] .pp-title--display{font-weight:var(--pp-font-weight-display);} html[data-pp-theme] .pp-title--h1{font-size:1.75rem;} html[data-pp-theme] .pp-title--h2{font-size:1.375rem;} html[data-pp-theme] .pp-title--h3{font-size:1.125rem;} html[data-pp-theme] .pp-text{font-weight:var(--pp-font-weight-body);line-height:var(--pp-line-height-body);} html[data-pp-theme] .pp-text--muted{color:var(--pp-text-muted);} @media (min-width:768px){ html[data-pp-theme] .pp-title--h1{font-size:2.25rem;} html[data-pp-theme] .pp-title--h2{font-size:1.75rem;} html[data-pp-theme] .pp-title--h3{font-size:1.375rem;} } /* ============================================================ 2) BOTON — solo 4 variantes: primary, secondary, ghost, danger Estados: normal / hover / focus / active / disabled / loading. Area tactil >=44px en movil. Sin gradientes, glow ni sombras grandes. ============================================================ */ html[data-pp-theme] .pp-button{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:0 20px; font-family:var(--pp-font-ui);font-size:1rem;font-weight:var(--pp-font-weight-action); line-height:1.2;text-align:center;text-decoration:none;white-space:nowrap; border:1px solid transparent;border-radius:var(--pp-radius-button); cursor:pointer;box-shadow:none;position:relative; transition:background-color var(--pp-duration-fast) var(--pp-easing-default), border-color var(--pp-duration-fast) var(--pp-easing-default), color var(--pp-duration-fast) var(--pp-easing-default); } html[data-pp-theme] .pp-button--block{display:flex;width:100%;} html[data-pp-theme] .pp-button:focus-visible{outline:var(--pp-focus-ring);outline-offset:var(--pp-focus-offset);} /* primary */ html[data-pp-theme] .pp-button--primary{background-color:var(--pp-primary);border-color:var(--pp-primary);color:var(--pp-white);} html[data-pp-theme] .pp-button--primary:hover{background-color:var(--pp-primary-hover);border-color:var(--pp-primary-hover);} html[data-pp-theme] .pp-button--primary:active{background-color:var(--pp-primary-hover);} /* secondary (neutro con borde) */ html[data-pp-theme] .pp-button--secondary{background-color:var(--pp-card);border-color:var(--pp-border);color:var(--pp-text);} html[data-pp-theme] .pp-button--secondary:hover{border-color:var(--pp-primary);color:var(--pp-primary);} /* ghost (transparente, texto azul) */ html[data-pp-theme] .pp-button--ghost{background-color:transparent;border-color:transparent;color:var(--pp-primary);} html[data-pp-theme] .pp-button--ghost:hover{background-color:rgba(37,99,235,.10);} /* danger */ html[data-pp-theme] .pp-button--danger{background-color:var(--pp-error);border-color:var(--pp-error);color:var(--pp-white);} html[data-pp-theme] .pp-button--danger:hover{background-color:var(--pp-card,#ffffff);border-color:#B91C1C;} /* disabled: legible (no depende solo del color, mantiene texto) */ html[data-pp-theme] .pp-button[disabled], html[data-pp-theme] .pp-button.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none;} /* loading: spinner visible, texto oculto, ancho estable */ html[data-pp-theme] .pp-button.is-loading{color:transparent;pointer-events:none;} html[data-pp-theme] .pp-button.is-loading::after{ content:"";position:absolute;width:18px;height:18px; border:2px solid currentColor;border-right-color:transparent;border-radius:50%; color:var(--pp-white);animation:pp-spin .6s linear infinite; } html[data-pp-theme] .pp-button--secondary.is-loading::after, html[data-pp-theme] .pp-button--ghost.is-loading::after{color:var(--pp-primary);} @keyframes pp-spin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion:reduce){ html[data-pp-theme] .pp-button.is-loading::after{animation-duration:1.2s;} } /* ============================================================ 3) CAMPO DE FORMULARIO — .pp-form-field / .pp-input / .pp-select / .pp-textarea Compartido por publico (login/registro/recuperacion) y panel (publicacion). ============================================================ */ html[data-pp-theme] .pp-form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;} html[data-pp-theme] .pp-label{font-family:var(--pp-font-ui);font-size:.875rem;font-weight:var(--pp-font-weight-action);color:var(--pp-text);} html[data-pp-theme] .pp-input, html[data-pp-theme] .pp-select, html[data-pp-theme] .pp-textarea{ width:100%;min-height:44px;padding:10px 12px; font-family:var(--pp-font-ui);font-size:1rem;line-height:1.4; color:var(--pp-text);background-color:var(--pp-card); border:1px solid var(--pp-border);border-radius:var(--pp-radius-input); transition:border-color var(--pp-duration-fast) var(--pp-easing-default); } html[data-pp-theme] .pp-textarea{min-height:96px;padding:12px;resize:vertical;} html[data-pp-theme] .pp-input::placeholder, html[data-pp-theme] .pp-textarea::placeholder{color:var(--pp-text-muted);opacity:1;} html[data-pp-theme] .pp-input:focus-visible, html[data-pp-theme] .pp-select:focus-visible, html[data-pp-theme] .pp-textarea:focus-visible{outline:var(--pp-focus-ring);outline-offset:1px;border-color:var(--pp-primary);} /* disabled */ html[data-pp-theme] .pp-input[disabled], html[data-pp-theme] .pp-select[disabled], html[data-pp-theme] .pp-textarea[disabled]{opacity:.6;cursor:not-allowed;background-color:var(--pp-bg);} /* error: color + mensaje (no solo color) */ html[data-pp-theme] .pp-input.is-error, html[data-pp-theme] .pp-input[aria-invalid="true"], html[data-pp-theme] .pp-select.is-error, html[data-pp-theme] .pp-textarea.is-error{border-color:var(--pp-error);} html[data-pp-theme] .pp-field-error{color:var(--pp-error);font-size:.8125rem;} /* success */ html[data-pp-theme] .pp-input.is-success, html[data-pp-theme] .pp-textarea.is-success{border-color:var(--pp-success);} /* ============================================================ 4) TARJETA — .pp-card y Property Card .pp-card--property Estados: normal / hover / vacia (sin imagen) / titulo largo / sin precio. ============================================================ */ html[data-pp-theme] .pp-card{ display:block;background-color:var(--pp-card); border:1px solid var(--pp-border);border-radius:var(--pp-radius-card); box-shadow:var(--pp-shadow-sm);overflow:hidden; transition:border-color var(--pp-duration-fast) var(--pp-easing-default), box-shadow var(--pp-duration-fast) var(--pp-easing-default); } html[data-pp-theme] .pp-card:hover{border-color:var(--pp-primary);box-shadow:var(--pp-shadow-md);} /* Property Card: media 4:3 con placeholder cuando falta imagen */ html[data-pp-theme] .pp-card--property .pp-card__media{ position:relative;aspect-ratio:4/3;background-color:#EEF2F7;overflow:hidden; } html[data-pp-theme] .pp-card--property .pp-card__media img{width:100%;height:100%;object-fit:cover;display:block;} html[data-pp-theme] .pp-card--property .pp-card__media--empty{ display:flex;align-items:center;justify-content:center;color:var(--pp-text-muted); } html[data-pp-theme] .pp-card__body{padding:16px;} /* Titulo largo: truncado a 2 lineas sin desbordar el layout */ html[data-pp-theme] .pp-card__title{ margin:0 0 4px;font-weight:var(--pp-font-weight-action);color:var(--pp-text); font-size:1rem;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;overflow-wrap:anywhere; } /* Localidad larga: una linea con ellipsis */ html[data-pp-theme] .pp-card__location{ margin:0;color:var(--pp-text-muted);font-size:.875rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } html[data-pp-theme] .pp-card__price{color:var(--pp-primary);font-weight:var(--pp-font-weight-display);font-size:1.125rem;} /* Sin precio: el texto "Consultar" vive en el markup PHP, no en CSS */ html[data-pp-theme] .pp-card__price--empty{color:var(--pp-text-muted);font-weight:var(--pp-font-weight-action);} /* ============================================================ 5) BADGE — .pp-badge (venta / alquiler / negociable) ============================================================ */ html[data-pp-theme] .pp-badge{ display:inline-flex;align-items:center;gap:4px; padding:4px 10px;border-radius:var(--pp-radius-pill); font-size:.6875rem;font-weight:var(--pp-font-weight-display);line-height:1; letter-spacing:.02em;white-space:nowrap;color:var(--pp-white); } html[data-pp-theme] .pp-badge--sale{background-color:var(--pp-primary);} html[data-pp-theme] .pp-badge--rent{background-color:var(--pp-card,#ffffff);} html[data-pp-theme] .pp-badge--negotiable{background-color:var(--pp-warning);color:#3D2A02;} /* ============================================================ 6) ALERTA — .pp-alert (no depende solo del color: icono + texto) ============================================================ */ html[data-pp-theme] .pp-alert{ display:flex;gap:10px;align-items:flex-start; padding:12px 14px;border:1px solid var(--pp-border);border-left-width:4px; border-radius:var(--pp-radius-input);background-color:var(--pp-card);color:var(--pp-text); font-size:.9375rem;line-height:1.4; } html[data-pp-theme] .pp-alert__icon{flex:0 0 auto;line-height:1;} html[data-pp-theme] .pp-alert--info{border-left-color:var(--pp-primary);} html[data-pp-theme] .pp-alert--success{border-left-color:var(--pp-success);} html[data-pp-theme] .pp-alert--warning{border-left-color:var(--pp-warning);} html[data-pp-theme] .pp-alert--error{border-left-color:var(--pp-error);} /* ============================================================ 7) ESTADO VACIO — .pp-empty-state (mensaje canonico vive en el markup PHP) ============================================================ */ html[data-pp-theme] .pp-empty-state{ display:flex;flex-direction:column;align-items:center;gap:12px; padding:32px 20px;text-align:center;color:var(--pp-text-muted); } html[data-pp-theme] .pp-empty-state__title{color:var(--pp-text);font-weight:var(--pp-font-weight-heading);font-size:1.125rem;margin:0;} /* ============================================================ 8) LOGO — dimensionado (sin swap content:url()). El header/footer apuntan el src al SVG v3 real (ver header/footer candidatos). PUENTE-F3-LOGO: !important solo para vencer el ancho/alto v2 mientras v2 siga cargado; retiro Fase 7 (< 2027-01-31); rollback = apagar flags v3. ============================================================ */ html[data-pp-theme] .pp-header__logo img{height:38px !important;width:auto !important;max-width:230px !important;} html[data-pp-theme] .pp-footer__logo img{height:34px !important;width:auto !important;max-width:210px !important;} /* ============================================================ 9) PUENTES scopeados a terceros (Adifier/v2) — DOCUMENTADOS. PUENTE-F3-BTN / PUENTE-F3-INPUT: !important necesario para vencer los cientos de !important de v2/child mientras siga cargado. Motivo: unificar botones e inputs al sistema v3. Dependencia: v2 activo. Riesgo: si se retira antes de Fase 7 reaparece verde/glass. Condicion de retiro: v1/v2 desactivados (Fase 7, < 2027-01-31). Rollback: apagar flags v3. ============================================================ */ /* PUENTE-F3-BTN: boton Publicar del header y botones Adifier "enviar/ver mas". */ html[data-pp-theme] .pp-header__action-btn--publish{ width:auto !important;min-width:120px !important;max-width:none !important; padding:0 18px !important;gap:8px !important;overflow:visible !important;white-space:nowrap !important; background:var(--pp-primary) !important;border:1px solid var(--pp-primary) !important;color:var(--pp-white) !important; border-radius:var(--pp-radius-button) !important;box-shadow:none !important; } html[data-pp-theme] .pp-header__action-btn--publish *{color:var(--pp-white) !important;fill:var(--pp-white) !important;stroke:var(--pp-white) !important;} html[data-pp-theme] .pp-header__action-btn--publish:hover{background:var(--pp-primary-hover) !important;border-color:var(--pp-primary-hover) !important;} html[data-pp-theme] body:not(.wp-admin) .af-button.submit-form, html[data-pp-theme] body:not(.wp-admin) .submit-ajax-form, html[data-pp-theme] body:not(.wp-admin) .pp-btn-ver-mas, html[data-pp-theme] body:not(.wp-admin) .pp-glass-more-button{ /* F7: el shorthand background (color solido) ya resetea background-image a none a la misma especificidad; se retira el longhand redundante. (-1 marca de peso) */ background:var(--pp-primary) !important; border:1px solid var(--pp-primary) !important;color:var(--pp-white) !important;box-shadow:none !important; } html[data-pp-theme] body:not(.wp-admin) .af-button.submit-form:hover, html[data-pp-theme] body:not(.wp-admin) .submit-ajax-form:hover, html[data-pp-theme] body:not(.wp-admin) .pp-btn-ver-mas:hover{background:var(--pp-primary-hover) !important;border-color:var(--pp-primary-hover) !important;} /* PUENTE-F3-INPUT: inputs/selects/textarea de Adifier al esquema claro v3. */ html[data-pp-theme="light"] body:not(.wp-admin) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]), html[data-pp-theme="light"] body:not(.wp-admin) textarea, html[data-pp-theme="light"] body:not(.wp-admin) select, html[data-pp-theme="light"] body:not(.wp-admin) .form-control, html[data-pp-theme="light"] body:not(.wp-admin) .select2-selection{ /* F7: el shorthand background (color solido) ya resetea background-image a none a la misma especificidad; se retira el longhand redundante. (-1 marca de peso) */ background:var(--pp-white) !important; color:var(--pp-text) !important;border-color:#CBD5E1 !important; } html[data-pp-theme="light"] body:not(.wp-admin) ::placeholder{color:#94A3B8 !important;} /* ============================================================================ PP HOME — DIRECCION VISUAL (Plan A1, 2026-08-06) Bloque ADITIVO. No redefine ninguna regla anterior de este archivo. Decision de diseno: el contrato de boton del sistema es `.pp-button` (seccion 2) y el de tarjeta es `.pp-card` (seccion 4). Este bloque NO introduce `.pp-btn` paralelo: extiende el puente PUENTE-F3-BTN a los botones que el Home 2 ya renderiza, de modo que exista un unico contrato visual de accion. PUENTE-A1-HOME2: !important necesario porque el CSS de Elementor de la portada (post-139406 / post-139407) se encola DESPUES de esta hoja y redeclara color, radio y padding de los enlaces del hero. Condicion de retiro: migrar el hero a markup propio o mover estas reglas a una hoja posterior a Elementor. Rollback: apagar flags v3 (no se encola ninguna hoja v3). ============================================================================ */ /* --- Accion primaria y secundaria del hero de Home 2 y CTA institucional --- Adoptan el contrato de `.pp-button`: altura de control uniforme, objetivo tactil >=44px, radio del token, sin sombras grandes ni gradientes. */ html[data-pp-theme] .pp-home-2-hero__button, html[data-pp-theme] .pp-home-2-growth__cta{ display:inline-flex !important;align-items:center;justify-content:center;gap:var(--pp-space-2); min-height:var(--pp-touch-target) !important;padding:0 var(--pp-space-5) !important; font-family:var(--pp-font-ui);font-size:var(--pp-fs-body) !important; font-weight:var(--pp-font-weight-action) !important;line-height:1.2; text-align:center;text-decoration:none !important; border-width:var(--pp-component-border-width);border-style:var(--pp-component-border-style); border-radius:var(--pp-radius-button) !important;box-shadow:none !important; transition:background-color var(--pp-duration-fast) var(--pp-easing-default), border-color var(--pp-duration-fast) var(--pp-easing-default), color var(--pp-duration-fast) var(--pp-easing-default); } html[data-pp-theme] .pp-home-2-hero__button--primary, html[data-pp-theme] .pp-home-2-growth__cta{ background:var(--pp-primary) !important;border-color:var(--pp-primary) !important; color:var(--pp-on-primary) !important; } html[data-pp-theme] .pp-home-2-hero__button--primary:hover, html[data-pp-theme] .pp-home-2-growth__cta:hover{ background:var(--pp-primary-hover) !important;border-color:var(--pp-primary-hover) !important; } /* Secundario neutro con borde: distinguible del primario sin depender del color. */ html[data-pp-theme] .pp-home-2-hero__button--secondary{ background:var(--pp-card) !important;border-color:var(--pp-border-strong) !important; color:var(--pp-text) !important; } html[data-pp-theme] .pp-home-2-hero__button--secondary:hover{ border-color:var(--pp-primary) !important;color:var(--pp-primary) !important; } html[data-pp-theme] .pp-home-2-hero__button:focus-visible, html[data-pp-theme] .pp-home-2-growth__cta:focus-visible{ outline:var(--pp-focus-ring);outline-offset:var(--pp-focus-offset); } html[data-pp-theme] .pp-home-2-hero__button[aria-disabled="true"], html[data-pp-theme] .pp-home-2-growth__cta[aria-disabled="true"]{ background:var(--pp-disabled-bg) !important;border-color:var(--pp-disabled-border) !important; color:var(--pp-disabled-text) !important;cursor:not-allowed;pointer-events:none; } /* --- Objetivo tactil de los enlaces de "Busquedas destacadas" --- El bloque vivo los renderiza a 13px sin padding: ~19px de alto, muy por debajo del minimo de 44px. Se les da altura de control sin cambiar el markup. */ html[data-pp-theme] .pp-popular-searches--home-2 ul a{ display:flex;align-items:center; min-height:var(--pp-touch-target); padding-block:var(--pp-space-1); font-size:var(--pp-fs-body);line-height:1.4; } /* --- Desborde horizontal del patron full-bleed --- `.pp-popular-searches--home-2` usa `width:100vw` con `margin-left:-50vw`. En desktop `100vw` incluye el ancho de la barra de scroll vertical, de modo que la seccion supera el ancho de contenido y genera scroll horizontal. Se recorta en el eje X del Home. Se usa `clip` y no `hidden` porque `hidden` crearia un contexto de scroll que rompe el header sticky. */ html[data-pp-theme] body.pp-home-2-preview{overflow-x:clip;} /* --- Alternancia de superficies del Home --- Dos secciones contiguas no comparten nivel: franja de confianza en superficie blanca, banner institucional en superficie clara destacada. */ html[data-pp-theme="light"] body.pp-home-2-preview .pp-home-2-trust{ background:var(--pp-card); } html[data-pp-theme="light"] body.pp-home-2-preview .pp-home-2-growth__inner{ background:var(--pp-surface-soft); } /* ============================================================================ PP HOME — TANDA A2 (2026-08-06) Bloque ADITIVO. No redefine ninguna regla anterior de este archivo. Cierra dos defectos observados en el Home REAL de produccion, no en harness: evidence/task-A1-release/live-visual/live-visual-report.json PUENTE-A2-TOUCH: `!important` necesario porque `pp-header.php` imprime su `