/* =====================================================================
   Plaza -- portada estándar (mockup del hero, negocios anunciados, empleos y galería)  (prefijo: pz-)
   Prefijo asignado en core/helpers/module_registry.php -> 'css_prefix'.
   Solo clases pz-*. La estructura de la página es de chzr.css (.chzr-*). Se carga solo desde saas/plaza/index.php.
   El color de la app (--app) vive en chzr.css ([data-app="plaza"]).
   ===================================================================== */

/* ---- Mockup del hero: tablero de necesidades ---- */
.pz-mock-body { padding: 22px 24px 26px; }
.pz-need { padding: 12px 14px; border: 1px solid #eaecf0; border-radius: 10px; margin-bottom: 9px; }
.pz-need:last-child { margin-bottom: 0; }
.pz-need strong { display: block; font-size: .78rem; }
.pz-need small { display: block; margin-top: 2px; color: #667085; font-size: .62rem; }
.pz-need .pz-tag { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 100px; background: #f4e8f7; color: #86198f; font-size: .58rem; font-weight: 800; }

/* ---- Bloques con datos reales (negocios anunciados / empleos) ---- */
.pz-block { padding: 56px 0 8px; }
.pz-block h2 { margin: 0 0 6px; text-align: center; }
.pz-block .pz-sub { margin: 0 auto 22px; max-width: 640px; text-align: center; color: #667085; font-size: .95rem; }
.pz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pz-card { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.pz-card:hover { box-shadow: 0 5px 16px rgba(0, 0, 0, .13); transform: translateY(-1px); }
.pz-card img { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 8px; background: #f4f5f7; object-fit: contain; }
.pz-ini { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 8px; background: var(--app, #a21caf); color: #fff; font-size: 1.3rem; font-weight: 800; }
.pz-body { display: flex; flex-direction: column; min-width: 0; }
.pz-body strong { font-size: .95rem; line-height: 1.25; }
.pz-body em { margin-top: 2px; color: #667085; font-size: .8rem; font-style: normal; }
.pz-body .pz-loc { color: #98a2b3; font-size: .78rem; }
.pz-more { text-align: center; margin-top: 18px; }
.pz-more a { display: inline-block; padding: 10px 20px; border-radius: 9px; background: var(--app, #a21caf); color: #fff; font-weight: 700; text-decoration: none; }
.pz-more a:hover { filter: brightness(1.12); }

/* ---- Galería de anuncios gratuitos (masonry por JS) ---- */
.pz-gallery { padding: 56px 0 8px; }
.pz-gallery h2 { margin: 0 0 6px; text-align: center; }
.pz-gallery .pz-sub { margin: 0 auto 22px; max-width: 640px; text-align: center; color: #667085; font-size: .95rem; }
#pzGrid { display: flex; gap: 12px; align-items: flex-start; }
#pzGrid .pz-col { display: flex; flex: 1 1 0; flex-direction: column; gap: 12px; min-width: 0; }
#pzGrid .pz-item { overflow: hidden; border-radius: 10px; background: #eee; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); cursor: zoom-in; }
#pzGrid .pz-item img { display: block; width: 100%; height: 220px; object-fit: cover; transition: transform .2s ease; }
#pzGrid .pz-item:hover img { transform: scale(1.04); }
#pzViewer { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; background: rgba(0, 0, 0, .92); cursor: zoom-out; }
#pzViewer img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }

@media (max-width: 600px) {
	.pz-mock-body { padding: 16px; }
	.pz-block, .pz-gallery { padding-top: 40px; }
}