/* Página pública del salón. Todo vive bajo .salon para poder mostrarla también dentro de la vista previa del generador. */
:root {
  --s-bg: #F3F0F4;
  --s-surface: #FFFFFF;
  --s-ink: #241B2B;
  --s-muted: #6D6274;
  --s-line: #E2DCE5;
  --s-accent-ink: #FFFFFF;
  --a-l: #9C2A5A;
  --a-d: #E57BA6;
  --s-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --s-body: "Figtree", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s-bg: #17121B; --s-surface: #221B27; --s-ink: #F1EAF2; --s-muted: #B3A7B8;
    --s-line: #362C3C; --s-accent-ink: #1E1220;
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .salon { --s-accent: var(--a-d); }
}
:root[data-theme="dark"] {
  --s-bg: #17121B; --s-surface: #221B27; --s-ink: #F1EAF2; --s-muted: #B3A7B8;
  --s-line: #362C3C; --s-accent-ink: #1E1220;
  color-scheme: dark;
}
:root[data-theme="dark"] .salon { --s-accent: var(--a-d); }

/* Paletas que elige el generador (parámetro c) */
.salon[data-c="1"] { --a-l: #3F6B52; --a-d: #8FC4A3; }
.salon[data-c="2"] { --a-l: #8A5A1F; --a-d: #E0B070; }
.salon[data-c="3"] { --a-l: #2B2D42; --a-d: #A9B4E8; }
.salon[data-c="4"] { --a-l: #B8432F; --a-d: #F29A86; }

.salon {
  --s-accent: var(--a-l);
  box-sizing: border-box;
  background: var(--s-bg);
  color: var(--s-ink);
  font-family: var(--s-body);
  font-size: 16px;
  line-height: 1.5;
  max-width: 440px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.salon *, .salon *::before, .salon *::after { box-sizing: border-box; }

.salon .id { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.salon .mono {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--s-accent); color: var(--s-accent-ink);
  font-family: var(--s-display); font-style: italic; font-size: 42px; line-height: 1;
}
.salon h1 {
  font-family: var(--s-display); font-weight: 500; font-style: italic;
  font-size: 2.2rem; line-height: 1.05; margin: 4px 0 0; letter-spacing: -0.01em;
  text-wrap: balance; overflow-wrap: anywhere;
}
.salon .tag { margin: 0; color: var(--s-muted); font-size: 0.95rem; letter-spacing: 0.03em; overflow-wrap: anywhere; }

.salon .actions { display: flex; flex-direction: column; gap: 10px; }
.salon .btn {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: 14px;
  background: var(--s-surface); color: var(--s-ink);
  border: 1px solid var(--s-line);
  text-decoration: none; font-weight: 500;
  transition: transform .15s ease, border-color .15s ease;
}
.salon .btn:hover { border-color: var(--s-accent); transform: translateY(-1px); }
.salon .btn:focus-visible { outline: 3px solid var(--s-accent); outline-offset: 2px; }
.salon .btn svg { width: 22px; height: 22px; flex: none; }
.salon .btn .txt { display: flex; flex-direction: column; min-width: 0; }
.salon .btn small { color: var(--s-muted); font-weight: 400; font-size: 0.82rem; overflow-wrap: anywhere; }
.salon .btn.primary { background: var(--s-accent); color: var(--s-accent-ink); border-color: var(--s-accent); padding-block: 18px; }
.salon .btn.primary small { color: var(--s-accent-ink); opacity: .8; }
.salon .btn .arrow { margin-left: auto; opacity: .45; width: 18px; height: 18px; }

.salon .empty { text-align: center; color: var(--s-muted); padding-block: 60px; display: flex; flex-direction: column; gap: 8px; }
.salon .empty strong { color: var(--s-ink); font-family: var(--s-display); font-style: italic; font-weight: 500; font-size: 1.6rem; }

.salon footer { text-align: center; color: var(--s-muted); font-size: 0.8rem; display: flex; flex-direction: column; gap: 4px; }

body.salon-page { margin: 0; background: var(--s-bg); }

@media (prefers-reduced-motion: reduce) {
  .salon .btn { transition: none; }
  .salon .btn:hover { transform: none; }
}