/* 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:#B91C1C;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:#334155;}
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;}