/* look.css — §11 "Look nuevo" (blueprint, 13 rules) for multiservicios. App-owned; loaded AFTER components.css.
   Zero hex here: every color/shadow/radius/space is var(--token). Brand = --primary-* / --accent-* (brand.css) + logo. */

/* Rule 2 + rule 3 token the core tokens.css lacks: --primary-hover (400 in dark, 600 in light). */
:root { --primary-hover: var(--primary-400); }
[data-theme="light"] { --primary-hover: var(--primary-600); }

/* ---- Rules 3–5: buttons — rest shadow-1, hover lift -1px + shadow-2, active back + scale .98 ---- */
.btn {
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.btn--ghost { box-shadow: none; } /* icon/toolbar buttons: no surface, so no elevation */
@media (hover: hover) {
  .btn:hover:not([disabled]) { transform: translateY(-1px); box-shadow: var(--shadow-2); }
  .btn--primary:hover:not([disabled]) { background: var(--primary-hover); box-shadow: var(--shadow-2); } /* core used glow on every primary */
  .btn--ghost:hover:not([disabled]) { box-shadow: none; }
}
.btn:active:not([disabled]) { transform: translateY(0) scale(.98); box-shadow: var(--shadow-1); }
.btn[disabled] { box-shadow: none; transform: none; }
/* Rule 5: exactly ONE glowing CTA per screen — add .cta-glow to that one button only. */
.cta-glow { box-shadow: var(--glow-primary); }
@media (hover: hover) { .cta-glow:hover:not([disabled]) { box-shadow: var(--glow-primary); } }

/* ---- Rules 6–7: cards — soft shadows; only .card--interactive lifts ---- */
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--sp-6);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
@media (hover: hover) {
  .card:hover { transform: none; border-color: var(--border); } /* core lifted every card */
  .card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--border-strong); }
}
.card > * + * { margin-top: var(--sp-4); }

/* ---- Rules 8–10: type hierarchy + white space ---- */
body { font-family: var(--font-body); font-size: var(--fs-base); }
.screen-title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.02em; margin: 0; }
.section-title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; margin: 0 0 var(--sp-4); }
.muted { color: var(--text-muted); font-size: var(--fs-sm); }
.num { font-variant-numeric: tabular-nums; }
.page { max-width: var(--w-content); margin: 0 auto; padding: var(--sp-4); display: grid; gap: var(--sp-8); }
.narrow { max-width: var(--w-narrow); width: 100%; margin-inline: auto; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.stack { display: grid; gap: var(--sp-4); }
.grid-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.price { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; }
.badge-soft { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); min-height: 24px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; }
.note { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); background: var(--info-bg); color: var(--text); font-size: var(--fs-sm); }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.checklist li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-2); align-items: start; font-size: var(--fs-sm); }
.checklist .opt { color: var(--text-muted); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); z-index: 10; background: var(--surface-2); padding: var(--sp-2); border-radius: var(--r-sm); }

/* Icons (Lucide SVG, stroke=currentColor) as CSS masks so they follow the theme color. Usage: <i class="i" style="--i:url(/icons/phone.svg)"></i> */
.i { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -4px; }
.i--lg { width: 48px; height: 48px; color: var(--text-subtle); }

/* ---- Rules 11–12: skeletons with the real shape (no full-screen spinner) ---- */
.sk-card { height: 168px; border-radius: var(--r-lg); }
.sk-line { height: 16px; border-radius: var(--r-sm); }
.sk-line--sm { height: 12px; width: 60%; }
.sk-row { height: 44px; border-radius: var(--r-md); }
.btn .spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--on-primary); border-radius: var(--r-full); animation: ms-spin .8s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* ---- Rule 13: reduced motion — no shimmer, no animated elevation ---- */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .btn:hover:not([disabled]), .card--interactive:hover, .btn:active:not([disabled]) { transform: none; }
  .btn .spinner { animation: none; }
}

/* ===================== Forge 0.2.0 — booking flow, checklist, admin (tokens only, zero hex) ===================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-card { cursor: pointer; display: grid; align-content: start; }
.svc-card.is-selected { border-color: var(--primary-500); box-shadow: var(--shadow-2); }
.steps { gap: var(--sp-6); }
.step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--sp-3); }
.step__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; padding: 0; margin-bottom: var(--sp-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-2); scroll-snap-type: x proximity; }
.chip { position: relative; display: inline-grid; justify-items: center; align-content: center; min-height: var(--tap); min-width: 64px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); cursor: pointer; scroll-snap-align: start; flex: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip__label { font-size: var(--fs-sm); font-weight: 600; }
.chip__sub { font-size: var(--fs-xs); color: var(--text-muted); }
.chip:has(input:checked) { border-color: var(--primary-500); background: var(--primary-600); color: var(--on-primary); }
.chip:has(input:checked) .chip__sub { color: var(--on-primary); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (hover: hover) { .chip:hover { border-color: var(--border-strong); } }
.slots { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.slot { min-height: var(--tap); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font: 600 var(--fs-sm)/1 var(--font-body); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.slot[aria-pressed="true"] { background: var(--primary-600); border-color: var(--primary-500); color: var(--on-primary); }
.slot[disabled] { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
@media (hover: hover) { .slot:hover:not([disabled]) { border-color: var(--border-strong); } }
.sk-slot { height: var(--tap); border-radius: var(--r-md); }
.summary { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.summary dt { color: var(--text-muted); } .summary dd { margin: 0; font-weight: 600; }
.checklist__h { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.checklist--boxes li { grid-template-columns: 1fr; }
.checklist--boxes label { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-2); align-items: start; cursor: pointer; }
.checklist--boxes input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary-500); }
.checklist--boxes input:checked + span { text-decoration: line-through; color: var(--text-muted); }

/* admin */
.tabpanel[hidden] { display: none; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cal { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.cal__day { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); display: grid; gap: var(--sp-2); align-content: start; min-height: 120px; }
.cal__day.is-today { border-color: var(--primary-500); }
.cal__head { font-size: var(--fs-sm); font-weight: 600; display: flex; justify-content: space-between; }
.bk { display: grid; gap: 2px; text-align: left; width: 100%; padding: var(--sp-2); border-radius: var(--r-sm); border: 1px solid var(--border); border-left: 3px solid var(--info);
  background: var(--surface-2); color: var(--text); font: 400 var(--fs-xs)/1.35 var(--font-body); cursor: pointer; }
.bk[data-staff="daniel"] { border-left-color: var(--accent-500); }
.bk[data-status="cancelled"] { opacity: .5; text-decoration: line-through; }
.bk strong { font-size: var(--fs-sm); }
@media (hover: hover) { .bk:hover { border-color: var(--border-strong); } }
.legend { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--text-muted); }
.legend::before { content: ""; width: 10px; height: 10px; border-radius: var(--r-full); background: var(--info); }
.legend--daniel::before { background: var(--accent-500); }
.progress { display: inline-flex; align-items: center; gap: var(--sp-2); }
.progress__bar { width: 64px; height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.progress__bar > span { display: block; height: 100%; background: var(--success); }
.svc-edit { display: grid; gap: var(--sp-4); }
.svc-edit .grid-2 { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.doc-row { display: grid; gap: var(--sp-2); grid-template-columns: 1fr 1fr auto auto; align-items: center; }
@media (max-width: 640px) { .doc-row { grid-template-columns: 1fr; } }
.tr-click { cursor: pointer; }
dialog.modal { width: min(560px, calc(100vw - 2 * var(--sp-4))); }

/* print: only the sheet being printed (checklist or confirmation) */
@media print {
  [data-noprint], header, footer, .btn, .skip-link { display: none !important; }
  body.printing main > *:not(:has(.print-target)):not(.print-target) { display: none !important; }
  body.printing #book:has(.print-target) > :not(.print-target) { display: none !important; }
  .card { box-shadow: none; border-color: var(--border-strong); }
  .checklist--boxes input { accent-color: auto; }
}
/* [hidden] must win over .btn/.card display rules (e.g. Sign out hidden in demo) */
[hidden] { display: none !important; }
/* admin "documents received": checked = received, no strike-through */
#bkDocs .checklist--boxes input:checked + span { text-decoration: none; color: var(--text); }