/* places-panel.css
   Todo el color sale de estos tokens; sobreescríbelos en tu hoja o en el elemento. */
places-panel {
  --pp-surface: #FFFFFF;
  --pp-ink: #12302A;
  --pp-muted: #58706A;
  --pp-line: #D7E0DC;
  --pp-accent: #0E7C7B;
  --pp-sun: #E3A21A;
  --pp-skel: #E3EAE7;
  --pp-skel-hi: #F2F6F4;
  --pp-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --pp-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pp-ease: cubic-bezier(.25, .1, .25, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) places-panel {
    --pp-surface: #112022; --pp-ink: #E3EEEA; --pp-muted: #93A9A3; --pp-line: #233634;
    --pp-accent: #43B8B3; --pp-sun: #F0B43A; --pp-skel: #1B2C2D; --pp-skel-hi: #26393A;
  }
}
:root[data-theme="dark"] places-panel {
  --pp-surface: #112022; --pp-ink: #E3EEEA; --pp-muted: #93A9A3; --pp-line: #233634;
  --pp-accent: #43B8B3; --pp-sun: #F0B43A; --pp-skel: #1B2C2D; --pp-skel-hi: #26393A;
}

places-panel {
  display: flex; flex-direction: column; min-height: 0; height: 100%;
  background: var(--pp-surface); color: var(--pp-ink);
  font: 15px/1.5 var(--pp-body);
}
places-panel button { font: inherit; color: inherit; }
places-panel :focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }

.pp-head { padding: 20px 20px 14px; border-bottom: 1px solid var(--pp-line); }
.pp-title { font: 700 24px/1.1 var(--pp-display); letter-spacing: -.01em; margin: 0 0 8px; }
.pp-lede { margin: 0 0 14px; color: var(--pp-muted); font-size: 14px; max-width: 44ch; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--pp-line); background: transparent;
  border-radius: 999px; padding: 4px 11px 4px 8px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pp-c); }
.pp-chip[aria-pressed="false"] { opacity: .45; }
.pp-chip[aria-pressed="false"] .pp-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pp-c); }

.pp-views { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.pp-view { position: absolute; inset: 0; overflow-y: auto; transition: transform .32s var(--pp-ease), opacity .32s; }
.pp-detail-view { transform: translateX(100%); opacity: 0; visibility: hidden; }
.pp-views.is-detail .pp-list-view { transform: translateX(-22%); opacity: 0; visibility: hidden;
  transition: transform .32s var(--pp-ease), opacity .32s, visibility 0s .32s; }
.pp-views.is-detail .pp-detail-view { transform: none; opacity: 1; visibility: visible; }

.pp-status { margin: 0; padding: 12px 20px; font-size: 13px; color: var(--pp-muted); }
.pp-list { list-style: none; margin: 0; padding: 0 10px 24px; }
.pp-row-btn { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; width: 100%;
  text-align: left; background: transparent; border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; }
.pp-row.is-hover .pp-row-btn, .pp-row-btn:hover { background: color-mix(in srgb, var(--pp-accent) 8%, transparent); }
.pp-swatch { width: 42px; height: 42px; border-radius: 9px; background: var(--pp-c); position: relative; overflow: hidden; transition: background .4s; }
.pp-swatch.has-tint { background: linear-gradient(135deg, var(--pp-t1), var(--pp-t2)); }
.pp-swatch::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pp-c); box-shadow: 0 0 0 2px var(--pp-surface); }
.pp-row-body { min-width: 0; }
.pp-row-name { display: block; font-weight: 700; line-height: 1.25; }
.pp-row-meta { display: flex; gap: 8px; font-size: 12.5px; color: var(--pp-muted); margin-top: 1px; }
.pp-row-sum { display: block; font-size: 13px; color: var(--pp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; min-height: 1.4em; }

.pp-tiers { display: inline-flex; gap: 3px; }
.pp-tiers i { display: block; width: 12px; height: 4px; border-radius: 2px; background: var(--pp-line); }
.pp-tiers i[data-s="done"] { background: var(--pp-accent); }
.pp-tiers i[data-s="error"] { background: #C23F38; }
.pp-tiers i[data-s="loading"] { background: linear-gradient(90deg, var(--pp-line), var(--pp-accent), var(--pp-line));
  background-size: 200% 100%; animation: pp-shimmer 1s linear infinite; }
.pp-tiers-big i { width: 22px; height: 5px; }

.pp-sk { display: inline-block; height: .95em; vertical-align: middle; border-radius: 4px; color: transparent;
  background: linear-gradient(90deg, var(--pp-skel), var(--pp-skel-hi), var(--pp-skel)); background-size: 200% 100%;
  animation: pp-shimmer 1.3s linear infinite; }
.pp-sk-line { display: block; height: 12px; margin: 8px 0; }
.pp-sk-photo { display: block; height: auto; aspect-ratio: 4 / 3; }
@keyframes pp-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.pp-d { padding: 16px 20px 32px; }
.pp-d-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }
.pp-back { background: transparent; border: 1px solid var(--pp-line); border-radius: 999px; padding: 5px 13px; font-size: 13px; cursor: pointer; }
.pp-back:hover { border-color: var(--pp-accent); }
.pp-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pp-muted); }
.pp-hero { height: 132px; border-radius: 14px; background: var(--pp-c); position: relative; overflow: hidden; transition: background .5s; }
.pp-hero.has-tint { background: linear-gradient(135deg, var(--pp-t1), var(--pp-t2)); }
.pp-hero-cat { position: absolute; left: 12px; bottom: 10px; background: var(--pp-surface); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.pp-d-name { font: 700 25px/1.12 var(--pp-display); margin: 16px 0 6px; letter-spacing: -.01em; }
.pp-d-name:focus { outline: none; }
.pp-slot { transition: opacity .22s; }
.pp-slot.is-fresh { opacity: 0; }
.pp-d-sum { margin: 6px 0 14px; font-size: 15.5px; }
.pp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--pp-line); border: 1px solid var(--pp-line);
  border-radius: 10px; overflow: hidden; margin: 0 0 20px; }
.pp-facts div { background: var(--pp-surface); padding: 9px 11px; }
.pp-facts dt { font-size: 12px; color: var(--pp-muted); }
.pp-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.pp-rating { color: var(--pp-sun); font-size: 16px; }
.pp-review-count { color: var(--pp-muted); font-size: 12px; font-weight: 400; display: block; margin-top: 2px; }
.pp-volbar { display: block; height: 4px; border-radius: 2px; background: var(--pp-line); margin-top: 5px; overflow: hidden; }
.pp-volbar b { display: block; height: 100%; background: var(--pp-sun); }
.pp-d-desc { margin: 0 0 18px; max-width: 60ch; }
.pp-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0 20px; }
.pp-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
.pp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.pp-photo img.is-loaded { opacity: 1; }
.pp-photo figcaption { position: absolute; left: 6px; right: 6px; bottom: 5px; font-size: 11.5px; line-height: 1.2; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.pp-sec { margin: 0 0 20px; }
.pp-sec h3 { font: 700 15px/1.2 var(--pp-display); margin: 0 0 8px; }
.pp-spark { width: 100%; height: 64px; display: block; }
.pp-rows { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.pp-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--pp-line); }
.pp-rows span:last-child { color: var(--pp-muted); text-align: right; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tag { font-size: 12.5px; border-radius: 6px; padding: 2px 8px; background: color-mix(in srgb, var(--pp-c) 14%, transparent); }
.pp-error { color: var(--pp-muted); }
.pp-retry { margin-left: 6px; border: 1px solid var(--pp-line); background: transparent; border-radius: 999px; padding: 3px 11px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .pp-view, .pp-hero, .pp-swatch, .pp-slot, .pp-photo img { transition: none; }
  .pp-sk, .pp-tiers i[data-s="loading"] { animation: none; }
}