/* PUEBLER — Directorio de Puntos de Sellado Oficiales y página de ayuda */
.sp-filters { background: var(--puebler-surface); border-bottom: 1px solid var(--puebler-border); }
.sp-filter-q input { max-width: 190px; }
.sp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; align-items: start; }
.sp-list { background: var(--puebler-surface); border-right: 1px solid var(--puebler-border); min-height: 50vh; }
.sp-list-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--puebler-border-soft); }
.sp-map-toggle { display: none; }
.sp-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--puebler-border); }
.sp-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: var(--puebler-surface-2); border: 1px solid var(--puebler-border); }
.sp-row-main { min-width: 0; }
.sp-row-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 1.02rem; }
.sp-row-title .pb-name { color: var(--puebler-text); font-weight: 700; }
.sp-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; font-size: .84rem; color: var(--puebler-text-muted); }
.sp-row-place { margin-top: 6px; font-size: .88rem; color: var(--puebler-text); }
.sp-row-place i { color: var(--puebler-coral); }
.sp-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.sp-map-wrap { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); }
.sp-map { width: 100%; height: 100%; background: var(--puebler-surface-2); }
.sp-how { border-top: 1px solid var(--puebler-border); }
.sp-steps { padding-left: 1.2rem; margin: 10px 0 14px; display: grid; gap: 8px; }
@media (max-width: 991px) {
  .sp-layout { grid-template-columns: 1fr; }
  .sp-list { border-right: 0; }
  .sp-map-toggle { display: inline-flex; }
  .sp-map-wrap { display: none; position: static; height: 60vh; order: -1; }
  .sp-map-wrap.open { display: block; }
}
@media (max-width: 575px) {
  .sp-filters { flex-wrap: nowrap; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; }
  .sp-filters::-webkit-scrollbar { display: none; }
  .sp-filters > * { flex: 0 0 auto; }
  .sp-row { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .sp-logo { width: 52px; height: 52px; }
}

/* Ayuda */
.hp-search { display: flex; gap: 8px; margin: 14px 0 0; max-width: 560px; }
.hp-section { padding: 22px 0; border-bottom: 1px solid var(--puebler-border); }
.hp-section:last-child { border-bottom: 0; }
.hp-section h2 { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hp-section h2 i { color: var(--puebler-blue); }
.hp-q { border-bottom: 1px solid var(--puebler-border-soft); }
.hp-q summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.hp-q summary::-webkit-details-marker { display: none; }
.hp-q summary::after { content: '\F282'; font-family: 'bootstrap-icons'; color: var(--puebler-text-muted); transition: transform .2s ease; }
.hp-q[open] summary::after { transform: rotate(180deg); }
.hp-q p { margin: 0 0 14px; color: var(--puebler-text); }
.hp-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--puebler-border); border-left: 1px solid var(--puebler-border); margin-top: 8px; }
.hp-contact a { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-right: 1px solid var(--puebler-border); border-bottom: 1px solid var(--puebler-border); color: var(--puebler-text); }
.hp-contact a:hover { background: var(--puebler-surface-2); }
.hp-contact i { font-size: 1.3rem; color: var(--puebler-blue); }
.hp-contact small { display: block; color: var(--puebler-text-muted); }