/* Marco único (menú lateral + barra superior) para el kiosco y el salón */
:root {
  --bk-s: 1;
  --bk-side: #2A1D14; --bk-side-2: #3B2A1D; --bk-side-ink: #EADBC8; --bk-side-mute: #B9A58F;
  --bk-brand: #B5693A; --bk-brand-2: #C97A47;
  --bk-top: #FFFFFF; --bk-top-ink: #2A1D14; --bk-line: #E9DFD2; --bk-chip: #F3ECE2;
  --bk-ok: #1D6B3E; --bk-ok-bg: #DDF3E5; --bk-off: #A02828; --bk-off-bg: #FBE1E1;
}
html[data-theme="dark"] {
  --bk-side: #17110C; --bk-side-2: #241912;
  --bk-top: #1F1711; --bk-top-ink: #F3E8DA; --bk-line: #3A2C20; --bk-chip: #2B2018;
  --bk-ok: #8EE3B0; --bk-ok-bg: #16301F; --bk-off: #FFA3A3; --bk-off-bg: #3A1717;
}
/* El kiosco se ve más grande que el salón (que ya tiene su zoom): se compensa el tamaño del marco */
body.fam-kiosco { --bk-s: .9; }
@media (max-width: 991.98px) { body.fam-kiosco { --bk-s: 1; } }

.bk-app { font-family: Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

/* ── Menú lateral ── */
.bk-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; display: flex; flex-direction: column; overflow-y: auto;
  width: calc(252px * var(--bk-s)); color: var(--bk-side-ink);
  background: linear-gradient(180deg, var(--bk-side), var(--bk-side-2));
  transition: transform .25s ease;
}
.bk-brand { padding: calc(16px * var(--bk-s)) calc(14px * var(--bk-s)) calc(8px * var(--bk-s)); }
.bk-brand-box {
  display: grid; place-items: center; min-height: calc(76px * var(--bk-s)); padding: 10px 12px;
  background: #fff; border-radius: 16px; text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.bk-brand-box img { display: block; max-width: 100%; max-height: calc(64px * var(--bk-s)); object-fit: contain; }
.bk-brand-text { font-family: 'Dancing Script', cursive; font-weight: 700; font-size: calc(32px * var(--bk-s)); line-height: 1.05; color: #2A1D14; text-align: center; }
.bk-brand-text.long { font-size: calc(23px * var(--bk-s)); }
.bk-nav { flex: 1; padding: 6px calc(10px * var(--bk-s)); }
.bk-group { padding: 14px 10px 6px; font-size: calc(11px * var(--bk-s)); font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--bk-side-mute); }
.bk-link {
  display: flex; align-items: center; gap: calc(12px * var(--bk-s)); width: 100%; margin-bottom: 2px;
  padding: calc(10px * var(--bk-s)) calc(12px * var(--bk-s)); border: 0; border-radius: 12px; background: transparent;
  color: var(--bk-side-ink); text-decoration: none; text-align: left; cursor: pointer;
  font: inherit; font-size: calc(14.5px * var(--bk-s)); font-weight: 600;
}
.bk-link i { width: calc(22px * var(--bk-s)); text-align: center; font-size: calc(18px * var(--bk-s)); color: var(--bk-side-mute); }
.bk-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.bk-link.active { background: linear-gradient(135deg, var(--bk-brand-2), var(--bk-brand)); color: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.bk-link.active i { color: #fff; }
.bk-foot { padding: 10px calc(10px * var(--bk-s)) calc(14px * var(--bk-s)); border-top: 1px solid rgba(255,255,255,.08); }
.bk-foot form { margin: 0; }
.bk-user { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; color: #fff; }
.bk-avatar { display: grid; place-items: center; flex: 0 0 auto; width: calc(36px * var(--bk-s)); height: calc(36px * var(--bk-s)); border-radius: 50%; background: var(--bk-brand); font-weight: 800; }
.bk-user-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.bk-user-t strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(14px * var(--bk-s)); }
.bk-user-t small { color: var(--bk-side-mute); font-size: calc(12px * var(--bk-s)); }

/* ── Barra superior ── */
.bk-main { min-height: 100vh; margin-left: calc(252px * var(--bk-s)); }
.bk-topbar {
  position: fixed; top: 0; left: calc(252px * var(--bk-s)); right: 0; z-index: 1020;
  display: flex; align-items: center; gap: 12px;
  height: calc(60px * var(--bk-s) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 18px 0;
  background: var(--bk-top); color: var(--bk-top-ink); border-bottom: 1px solid var(--bk-line);
}
.bk-topbar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(18px * var(--bk-s)); font-weight: 800; }
.bk-topbar-right { display: flex; align-items: center; gap: 8px; }
.bk-icon {
  display: inline-grid; place-items: center; width: calc(38px * var(--bk-s)); height: calc(38px * var(--bk-s));
  border: 0; border-radius: 12px; background: var(--bk-chip); color: var(--bk-top-ink);
  font-size: calc(18px * var(--bk-s)); text-decoration: none; cursor: pointer;
}
.bk-menu-btn { display: none; }
.bk-clock { font-size: calc(14px * var(--bk-s)); font-weight: 700; font-variant-numeric: tabular-nums; }
.bk-caja { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--bk-off-bg); color: var(--bk-off); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.bk-caja.on { background: var(--bk-ok-bg); color: var(--bk-ok); }
.bk-caja i { font-size: 9px; }
.bk-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--bk-chip); color: var(--bk-top-ink); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.bk-pill[hidden] { display: none; }
.bk-pill.nuevo { background: var(--bk-brand); color: #fff; box-shadow: 0 6px 16px rgba(181,105,58,.45); animation: bk-pulso 1.4s infinite; }
@keyframes bk-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.bk-content { padding-top: calc(60px * var(--bk-s) + env(safe-area-inset-top, 0px)); }
.fam-kiosco .bk-content { padding: calc(60px * var(--bk-s) + env(safe-area-inset-top, 0px) + 14px) 18px 24px; }
.fam-salon .bk-content { padding-bottom: 28px; }

.bk-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
.bk-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 991.98px) {
  .bk-sidebar { width: min(292px, 84vw); transform: translateX(-102%); }
  .bk-sidebar.open { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,.4); }
  .bk-main { margin-left: 0; }
  .bk-topbar { left: 0; padding-left: 12px; padding-right: 12px; }
  .bk-menu-btn { display: inline-grid; }
  .fam-kiosco .bk-content { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 767.98px) { .bk-hide-sm { display: none !important; } }
@media (max-width: 575.98px) { .bk-caja span, .bk-pill span, .bk-clock { display: none; } }