/*
 * hub-front-themes: hoja común del front (DOM semántico común, vestido por los tokens de tokens.css).
 * Los valores base son los medidos en los marcos de Casino (D-*, el theme por defecto); cada theme ajusta su layout y
 * detalles por tamaño en themes/<theme>/theme.css (E1.F10–F13).
 * Tamaños: html[data-size=desktop|tablet-h|tablet-v|movil-h|movil-v]; dentro de KitchHero: html[data-kh].
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--t-bg) var(--t-art-wide) center / cover no-repeat fixed;
  color: var(--t-text); font-family: var(--t-font-text);
  overflow-x: hidden;
}
html[data-size="tablet-v"] body, html[data-size="movil-v"] body { background-image: var(--t-art-tall); }
html[data-kh] body { background-attachment: scroll; }

/* Cambio de theme: fundido de 300 ms de fondo y colores (theme.js pone data-theme-fading) */
html[data-theme-fading] body,
html[data-theme-fading] body * {
  transition: background-color var(--duration-slow) var(--ease-standard), color var(--duration-slow) var(--ease-standard),
    border-color var(--duration-slow) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme-fading] body, html[data-theme-fading] body * { transition-duration: 1ms; }
}

/* Rótulos: Casino en versales espaciadas (Cinzel), los demás sin espaciado extra */
:root { --t-ls-label: 0; --t-ls-title: 0; }
[data-theme="casino"] { --t-ls-label: 2px; --t-ls-title: 3px; }
[data-theme="neon"] { --t-ls-label: 1px; }

a { color: var(--t-link); }
a:hover { color: var(--t-link-hover); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--t-focus); }
.kh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kh-noscript { padding: 24px; text-align: center; }
[hidden] { display: none !important; }

.kh-app { position: relative; min-height: 100vh; min-height: 100dvh; max-width: 1440px; margin: 0 auto; }

/* ── Controles ─────────────────────────────────────────────────────────────── */
.kh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--t-tap);
  padding: 0 18px; border: 1px solid var(--t-border-strong); border-radius: var(--t-radius-btn); background: transparent;
  color: var(--t-link); font-family: var(--t-font-display); font-weight: 700; font-size: 12px; letter-spacing: var(--t-ls-label);
  text-decoration: none; cursor: pointer; transition: transform var(--duration-fast) var(--ease-standard);
}
.kh-btn:active { transform: scale(0.98); }
.kh-btn[disabled] { opacity: 0.6; cursor: progress; }
.kh-btn--primary {
  border: 0; border-radius: var(--t-radius-btn); background: var(--t-accent); color: var(--t-on-accent);
  font-size: 14px; letter-spacing: var(--t-ls-title); padding: 17px 20px; clip-path: var(--t-chip);
  box-shadow: var(--t-shadow-btn, none);
}
[data-theme="casino"] .kh-btn--primary { border-radius: 0; }
.kh-btn--secondary { background: transparent; }
.kh-btn--ghost { border-color: transparent; color: var(--t-text-2); font-weight: 400; }
.kh-btn--danger { background: var(--t-accent); }
[data-theme="recreo"] .kh-btn--primary, [data-theme="recreo"] .kh-btn--secondary { border: 2px solid var(--t-border); }
[data-theme="cuaderno"] .kh-btn--secondary { border: 2px solid var(--t-border); background: #FFFFFF; color: var(--t-text); }
[data-theme="neon"] .kh-btn--secondary { border-color: var(--t-border-strong); color: var(--t-text); }

.kh-label { font-family: var(--t-font-display); font-size: 11px; letter-spacing: var(--t-ls-label); color: var(--t-text-2); }
.kh-input {
  min-width: 0; height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--t-border-strong);
  background: var(--t-surface-2); color: var(--t-text); font: 600 20px var(--t-font-accent);
}
[data-theme="recreo"] .kh-input, [data-theme="cuaderno"] .kh-input { border: 2px solid var(--t-border); background: #FFFFFF; font: 600 17px var(--t-font-text); }
[data-theme="neon"] .kh-input { border-color: var(--t-border); border-radius: 12px; font: 600 16px var(--t-font-text); }
.kh-input[aria-invalid="true"] { border-color: var(--t-error); }
.kh-chip {
  min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--t-border); background: var(--t-surface-2);
  color: var(--t-text); font: 600 19px var(--t-font-accent); cursor: pointer;
}
.kh-chip[aria-pressed="true"] { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); }
.kh-range { width: 100%; accent-color: var(--t-accent); }
.kh-check { width: 22px; height: 22px; accent-color: var(--t-accent); }

/* ── Marco común: encabezado, navegación y cuenta ─────────────────────────── */
.kh-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.kh-main { flex: 1 0 auto; display: flex; flex-direction: column; }
.kh-view-slot { flex: 1 0 auto; display: flex; flex-direction: column; }
.kh-shell[data-nav="header"] { padding: 30px 52px; gap: 24px; }
html[data-size="tablet-h"] .kh-shell[data-nav="header"], html[data-size="tablet-v"] .kh-shell[data-nav="header"] { padding: 24px 34px; gap: 20px; }
html[data-size="movil-h"] .kh-shell[data-nav="header"] { padding: 12px 22px; gap: 10px; }
.kh-shell[data-nav="bottom"] { padding: 18px 18px 0; }

.kh-header { display: flex; align-items: center; gap: 18px; }
.kh-header__home { display: contents; }
.kh-header__logo { width: 62px; height: 62px; border-radius: var(--t-radius-avatar); }
.kh-brand { display: flex; flex-direction: column; }
.kh-brand__name { font-family: var(--t-font-display); font-weight: 700; font-size: 26px; letter-spacing: calc(var(--t-ls-title) + 1px); color: var(--t-link); }
.kh-brand__tag { font-family: var(--t-font-accent); font-style: italic; font-size: 18px; color: var(--t-border-strong); }
.kh-nav { display: flex; gap: 26px; font-family: var(--t-font-display); font-size: 14px; letter-spacing: var(--t-ls-title); }
.kh-nav--header { margin-left: 40px; }
.kh-nav__link { text-decoration: none; color: var(--t-text-2); }
.kh-nav__link[aria-current="page"] { color: var(--t-link); font-weight: 700; border-bottom: 2px solid var(--t-border-strong); }
html[data-size="tablet-v"] .kh-header__logo, html[data-size="movil-h"] .kh-header__logo { width: 44px; height: 44px; }
html[data-size="tablet-v"] .kh-brand__tag, html[data-size="movil-h"] .kh-brand__tag { display: none; }
html[data-size="tablet-v"] .kh-nav--header, html[data-size="movil-h"] .kh-nav--header { margin-left: 12px; gap: 16px; font-size: 12px; }
html[data-size="tablet-v"] .kh-brand__name, html[data-size="movil-h"] .kh-brand__name { font-size: 16px; letter-spacing: var(--t-ls-title); }

.kh-account { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--t-text); }
.kh-account__avatar {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--t-border-strong); overflow: hidden;
  display: grid; place-items: center; background: var(--t-surface);
}
.kh-account__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.kh-account--pill {
  background: var(--t-surface); border: 1px solid var(--t-border-strong); border-radius: 999px; padding: 6px 18px 6px 6px;
  font: 500 15px var(--t-font-text);
}
.kh-account--pill .kh-account__avatar { width: 36px; height: 36px; }

/* Menú al pie (móvil vertical, fuera de KitchHero, req. 7.2): fijo abajo */
.kh-nav--bottom {
  position: sticky; bottom: 0; z-index: 5; margin: auto -18px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; background: var(--t-nav-bg); border-top: 1px solid var(--t-border-strong); padding: 6px 8px calc(18px + env(safe-area-inset-bottom));
  font-size: 11px; letter-spacing: var(--t-ls-label);
}
.kh-nav--bottom .kh-nav__link { text-align: center; padding: 15px 4px; border: 0; }
.kh-nav--bottom .kh-nav__link[aria-current="page"] { border: 0; }

/* Dentro de KitchHero (D11): encabezado compacto + pestañas arriba, nunca menú al pie */
.kh-khbar { display: flex; flex-direction: column; }
.kh-header[data-variant="compact"] { gap: 10px; padding: 4px 12px 0 16px; }
.kh-header[data-variant="compact"] .kh-header__logo { width: 32px; height: 32px; }
.kh-header[data-variant="compact"] .kh-brand__name { font-size: 13px; letter-spacing: var(--t-ls-title); }
.kh-nav--tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--t-border);
  font-size: 11px; letter-spacing: var(--t-ls-label); background: var(--t-nav-bg);
}
.kh-nav--tabs .kh-nav__link { text-align: center; padding: 14px 4px; border-bottom: 2px solid transparent; }
.kh-nav--tabs .kh-nav__link[aria-current="page"] { border-bottom-color: var(--t-border-strong); }
html[data-kh] .kh-shell { padding: 0; }
html[data-kh] .kh-main { padding: 12px 16px; }

/* Encabezado de página interna (Mi cuenta, Mis compas) */
.kh-page-head { display: flex; align-items: center; gap: 10px; }
.kh-back {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--t-border); display: grid; place-items: center;
  text-decoration: none; font-size: 20px; color: var(--t-link); background: var(--t-surface);
}
.kh-page-head__title { margin: 0; font-family: var(--t-font-display); font-size: 20px; letter-spacing: calc(var(--t-ls-title) + 1px); color: var(--t-link); }
.kh-page-head__count { font-family: var(--t-font-display); font-weight: 700; font-size: 15px; color: var(--t-accent); }
.kh-page-head .kh-account { margin-left: auto; }

/* ── Estados: carga, error, vacío (req. 8.1) ──────────────────────────────── */
.kh-state { display: flex; flex-direction: column; gap: 14px; }
.kh-state__text { margin: 0; text-align: center; font-family: var(--t-font-accent); font-style: italic; font-size: 22px; color: var(--t-accent); }
.kh-skel-group { display: flex; flex-direction: column; gap: 12px; }
.kh-skel {
  display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--t-border); border-radius: var(--t-radius-card);
  background: var(--t-surface);
}
.kh-skel__dot { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 3px dashed var(--t-border); background: var(--t-me-bg); }
.kh-skel__line { display: block; height: 12px; width: 70%; border-radius: 6px; background: var(--t-me-bg); }
.kh-skel__line--short { width: 45%; height: 9px; opacity: 0.7; }
.kh-skel--hero .kh-skel__dot { width: 76px; height: 76px; }
.kh-skel--card { flex-direction: column; padding: 14px 8px; }
.kh-skel--card .kh-skel__dot { width: 92px; height: 92px; border-width: 4px; }
.kh-skel--line { padding: 10px 12px; }
.kh-skel--line .kh-skel__dot { width: 28px; height: 28px; }
.kh-skel-group:has(.kh-skel--card) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (prefers-reduced-motion: no-preference) {
  .kh-skel { animation: kh-pulse 1.4s var(--ease-standard) infinite alternate; }
}
@keyframes kh-pulse { from { opacity: 1; } to { opacity: 0.6; } }
/* perf-inicio A1: el renglón de estado de la tarjeta reservado mientras llegan mejor / puesto / etapa (sin salto). */
.kh-game__mine[data-loading] { display: inline-block; min-width: 7em; border-radius: 6px; background: var(--t-me-bg); color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .kh-game__mine[data-loading] { animation: kh-pulse 1.4s var(--ease-standard) infinite alternate; }
}
.kh-state--error {
  margin-top: 90px; align-items: center; text-align: center; border: 1px solid var(--t-border-strong); border-radius: 18px;
  background: var(--t-surface); padding: 26px 20px;
}
.kh-state__logo { width: 110px; height: 110px; border-radius: 50%; opacity: 0.45; }
.kh-state__title { margin: 0; font-family: var(--t-font-display); font-size: 20px; letter-spacing: var(--t-ls-label); color: var(--t-link); }
.kh-state__body, .kh-state__hint { margin: 0; font-family: var(--t-font-accent); font-style: italic; font-size: 19px; }
.kh-state__retry { margin-top: 6px; padding: 16px 34px; }
.kh-state[data-state="soon"] { padding: 40px 0; text-align: center; font-family: var(--t-font-accent); font-size: 20px; color: var(--t-text-2); }
.kh-empty { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 24px 12px; }
.kh-empty__title { margin: 0; font-family: var(--t-font-display); font-size: 16px; letter-spacing: var(--t-ls-label); color: var(--t-link); }

/* ── Login del theme (marcos *-Estado-SinSesion-*) ────────────────────────── */
.kh-login {
  min-height: 100vh; min-height: 100dvh; padding: 60px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}
.kh-login__hero { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.kh-login__logo { width: 132px; height: 132px; border-radius: var(--t-radius-avatar); }
.kh-login__brand { margin: 0; font-family: var(--t-font-display); font-weight: 700; font-size: 22px; letter-spacing: var(--t-ls-title); color: var(--t-link); }
.kh-login__tag { margin: -18px 0 0; font-family: var(--t-font-accent); font-style: italic; font-size: 21px; color: var(--t-border-strong); }
.kh-login__chips { display: flex; justify-content: center; padding-left: 14px; }
.kh-login__chip { width: 64px; height: 64px; border-radius: var(--t-radius-icon); margin-left: -14px; border: 2px solid var(--t-bg); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }
.kh-login__card {
  align-self: stretch; margin-top: auto; border: 1px solid var(--t-border-strong); border-radius: 18px; background: var(--t-surface);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 14px;
}
.kh-login__title { margin: 0; font-family: var(--t-font-display); font-size: 18px; letter-spacing: var(--t-ls-title); color: var(--t-text); }
.kh-login__body, .kh-login__sub { margin: 0; font-family: var(--t-font-accent); font-style: italic; font-size: 19px; }
.kh-login__btn { width: 100%; }
.kh-login__g { display: none; }
.kh-login__note, .kh-login__info, .kh-login__err { margin: 0; font-size: 13px; color: var(--t-text-2); }
.kh-login__err { color: var(--t-text); background: var(--t-error); border-radius: 8px; padding: 6px 10px; font-weight: 600; }
html[data-size="desktop"] .kh-login, html[data-size="tablet-h"] .kh-login {
  display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 60px; align-items: center; text-align: left; padding: 30px 52px;
}
html[data-size="desktop"] .kh-login__hero, html[data-size="tablet-h"] .kh-login__hero { align-items: flex-start; }
html[data-size="desktop"] .kh-login__card, html[data-size="tablet-h"] .kh-login__card { margin: 0; padding: 40px 42px; align-items: center; text-align: center; border-radius: 22px; }
html[data-size="movil-h"] .kh-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 16px 22px; align-items: center; }
html[data-size="movil-h"] .kh-login__logo { width: 72px; height: 72px; }

/* ── Mi cuenta: hoja lateral (escritorio, tablet H), hoja inferior (tablet V), pantalla (móvil) ── */
.kh-overlay-slot:empty { display: none; }
.kh-account-veil { position: fixed; inset: 0; z-index: 20; background: var(--t-bg) var(--t-art-tall) center / cover no-repeat; overflow: auto; }
.kh-account-veil__close { position: absolute; inset: 0; }
.kh-account-sheet {
  position: relative; min-height: 100%; padding: 18px 18px 24px; display: flex; flex-direction: column; gap: 14px;
}
html[data-size="desktop"] .kh-account-veil, html[data-size="tablet-h"] .kh-account-veil, html[data-size="tablet-v"] .kh-account-veil { background: transparent; }
html[data-size="desktop"] .kh-account-sheet, html[data-size="tablet-h"] .kh-account-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: 560px; min-height: 0; overflow: auto; background: var(--t-modal);
  border-left: 1px solid var(--t-border-strong); box-shadow: var(--t-shadow-sheet); padding: 24px 32px; gap: 16px;
}
html[data-size="tablet-h"] .kh-account-sheet { width: 540px; padding: 18px 28px; gap: 12px; }
html[data-size="tablet-v"] .kh-account-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 0; max-height: 92%; overflow: auto; background: var(--t-modal);
  border-top: 1px solid var(--t-border-strong); border-radius: 26px 26px 0 0; box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.5);
  padding: 14px 34px 34px; gap: 18px;
}
.kh-acc-profile { border: 1px solid var(--t-border-strong); border-radius: 16px; background: var(--t-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
html[data-size="desktop"] .kh-acc-profile, html[data-size="tablet-h"] .kh-acc-profile { border: 0; background: none; padding: 0; gap: 16px; }
.kh-acc-avatar-row { display: flex; align-items: center; gap: 14px; }
.kh-acc-avatar { width: 72px; height: 72px; flex: none; border-radius: 50%; border: 3px solid var(--t-border-strong); object-fit: cover; }
html[data-size="desktop"] .kh-acc-avatar { width: 88px; height: 88px; }
.kh-acc-avatar-side { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.kh-acc-avatar-note { font-family: var(--t-font-accent); font-style: italic; font-size: 15px; color: var(--t-text-2); }
.kh-acc-field { display: flex; flex-direction: column; gap: 5px; }
.kh-acc-field__row { display: flex; gap: 8px; }
.kh-acc-field__row .kh-input { flex: 1 1 auto; }
.kh-acc-real { margin: 0; font-size: 13px; font-weight: 500; color: var(--t-accent); }
.kh-acc-status { margin: 0; min-height: 1em; font-size: 13px; color: var(--t-text-2); }
.kh-acc-links { display: flex; flex-direction: column; border-top: 1px solid var(--t-border); }
.kh-acc-links__row {
  display: flex; align-items: center; gap: 10px; min-height: 48px; border: 0; border-bottom: 1px solid var(--t-border); background: none;
  text-decoration: none; text-align: left; color: var(--t-text); font: 600 19px var(--t-font-accent); cursor: pointer; padding: 0;
}
.kh-acc-links__value { margin-left: auto; font-family: var(--t-font-display); font-weight: 700; font-size: 13px; color: var(--t-link); }
.kh-acc-word { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--t-border); }
.kh-acc-word__err { margin: 0; font-size: 13px; color: var(--t-text); background: var(--t-error); border-radius: 8px; padding: 6px 10px; }
.kh-acc-themes { display: flex; flex-direction: column; gap: 8px; }
.kh-acc-themes__head { display: flex; align-items: baseline; gap: 8px; }
.kh-acc-h2 { margin: 0; font-family: var(--t-font-display); font-size: 13px; letter-spacing: var(--t-ls-title); color: var(--t-link); }
.kh-acc-themes__note { font-family: var(--t-font-accent); font-style: italic; font-size: 15px; color: var(--t-border-strong); }
.kh-acc-sound { display: flex; flex-direction: column; }
.kh-acc-sound__row { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 44px; font: 600 18px var(--t-font-accent); }
.kh-acc-sound__mute { display: flex; align-items: center; gap: 12px; min-height: 44px; font: 600 18px var(--t-font-accent); }
.kh-acc-signout { width: 100%; padding: 15px; font-size: 12px; letter-spacing: var(--t-ls-title); background: var(--t-surface); }
html[data-size="desktop"] .kh-acc-signout { margin-top: auto; }
.kh-acc-kh { margin: 0; font-size: 13px; color: var(--t-text-2); }

/* ── Invitación a instalar la app (hub-app-push 1.2 · D14, views/partials/install.js): Inicio y Mi cuenta ── */
.kh-install-slot:empty, .kh-acc-install-slot:empty { display: none; }
.kh-inicio-slot { display: contents; }   /* el Inicio sigue siendo hijo directo de .kh-view-slot (marcos intactos) */
.kh-install-slot { margin-bottom: 14px; }
.kh-install {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--t-border-strong);
  border-radius: var(--t-radius-card); background: var(--t-surface); color: var(--t-text);
}
.kh-install__title { margin: 0; font-family: var(--t-font-display); font-weight: 700; font-size: 14px; letter-spacing: var(--t-ls-title); color: var(--t-link); }
.kh-install__text { margin: 0; font-size: 14px; color: var(--t-text-2); }
.kh-install__steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.kh-install__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kh-install__cta { padding: 12px 18px; }
.kh-install[data-variant="account"] { border-color: var(--t-border); background: var(--t-surface-2, var(--t-surface)); }
html[data-size="desktop"] .kh-install-slot, html[data-size="tablet-h"] .kh-install-slot { max-width: 720px; }

/* Selector de theme (Mi cuenta y bienvenida) */
.kh-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-size="desktop"] .kh-themes, html[data-size="tablet-h"] .kh-themes, html[data-size="movil-h"] .kh-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kh-theme-card {
  display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; border: 1px solid var(--t-border);
  background: var(--t-surface-2); color: var(--t-text); cursor: pointer; text-align: left;
}
.kh-theme-card[aria-pressed="true"] { border: 2px solid var(--t-accent); }
.kh-theme-card__thumb {
  position: relative; display: block; flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  background: var(--thumb-color) var(--thumb-bg) center / cover no-repeat;
}
.kh-theme-card__logo { position: absolute; left: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; display: none; }
.kh-theme-card__ink { position: absolute; left: 42px; top: 13px; width: 60px; height: 7px; border-radius: 4px; background: var(--thumb-ink); display: none; }
.kh-theme-card__ink--short { top: 25px; width: 38px; height: 5px; opacity: 0.55; }
.kh-theme-card__art { position: absolute; left: 8px; top: 8px; width: 48px; height: 48px; border-radius: 50%; }
.kh-theme-card__name { font-family: var(--t-font-display); font-weight: 700; font-size: 12px; letter-spacing: 1px; }
.kh-theme-card__name[data-font="casino"] { font-family: Cinzel, serif; }
.kh-theme-card__name[data-font="neon"] { font-family: Unbounded, sans-serif; font-weight: 800; }
.kh-theme-card__name[data-font="recreo"] { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }
.kh-theme-card__name[data-font="cuaderno"] { font-family: Fraunces, serif; font-weight: 800; }
.kh-theme-card__state { font-size: 12px; color: var(--t-text-2); }
.kh-theme-card[aria-pressed="true"] .kh-theme-card__state { color: var(--t-link); }
.kh-themes[data-variant="account"] .kh-theme-card { flex-direction: row; }
html[data-size="desktop"] .kh-themes[data-variant="account"] .kh-theme-card { flex-direction: column; align-items: stretch; gap: 4px; }
html[data-size="desktop"] .kh-themes[data-variant="account"] .kh-theme-card__thumb { width: auto; height: 78px; }
/* Bienvenida: tarjeta grande con logo, dos líneas de tinta y el ícono del juego */
.kh-themes[data-variant="welcome"] { gap: 10px; align-self: stretch; }
.kh-themes[data-variant="welcome"] .kh-theme-card { flex-direction: column; align-items: stretch; gap: 6px; padding: 7px; border-radius: 14px; }
.kh-themes[data-variant="welcome"] .kh-theme-card[aria-pressed="true"] { background: var(--t-me-bg); }
.kh-themes[data-variant="welcome"] .kh-theme-card__thumb { width: auto; height: 112px; border-radius: 10px; }
.kh-themes[data-variant="welcome"] .kh-theme-card__logo,
.kh-themes[data-variant="welcome"] .kh-theme-card__ink { display: block; }
.kh-themes[data-variant="welcome"] .kh-theme-card__art { left: auto; top: auto; right: 8px; bottom: 7px; width: 62px; height: 62px; }
.kh-theme-card__note { font-family: var(--t-font-accent); font-style: italic; font-size: 14px; color: var(--t-text-2); }
.kh-themes[data-variant="welcome"] .kh-theme-card__name { letter-spacing: 2px; }

/* ── Mis compas (marcos *-MisCompas-*) ────────────────────────────────────── */
.kh-compas { display: flex; flex-direction: column; gap: 12px; }
html[data-size="desktop"] .kh-compas { width: 880px; max-width: 100%; align-self: center; gap: 16px; }
.kh-compas__intro { margin: 0; font-family: var(--t-font-accent); font-style: italic; font-size: 18px; color: var(--t-accent); }
.kh-compas__tag { margin: 0; font-family: var(--t-font-accent); font-size: 11px; letter-spacing: 2px; color: var(--t-live); }
.kh-compas__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kh-compa {
  border: 1px solid var(--t-border-strong); border-radius: 16px; background: var(--t-surface); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.kh-compa[data-paused="true"] { border-color: var(--t-border); }
.kh-compa[data-paused="true"] .kh-compa__row { opacity: 0.5; }
.kh-compa__row { display: flex; align-items: center; gap: 12px; }
.kh-compa__ini {
  width: 52px; height: 52px; flex: none; border-radius: 50%; border: 2px dashed var(--t-border-strong); background: var(--t-me-bg);
  display: grid; place-items: center; font-family: var(--t-font-display); font-weight: 700; font-size: 20px; color: var(--t-link);
}
.kh-compa__text { flex-grow: 1; min-width: 0; }
.kh-compa__nick { margin: 0; font-family: var(--t-font-accent); font-weight: 600; font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.kh-compa__meta { margin: 0; font-size: 12px; color: var(--t-text-2); }
.kh-compa__paused { margin: 0; font-family: var(--t-font-accent); font-style: italic; font-size: 16px; color: var(--t-accent); }
.kh-compa__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kh-compa__actions .kh-btn { font-size: 11px; padding: 0 12px; }
.kh-compa__actions .kh-btn--ghost { border: 1px solid var(--t-border); }
.kh-compa__confirm { border-top: 1px solid var(--t-border); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.kh-compa__question { margin: 0; font-family: var(--t-font-accent); font-weight: 600; font-size: 18px; }
.kh-compa__note { font-style: italic; font-weight: 500; color: var(--t-text-2); }
.kh-compa__err { margin: 0; font-size: 13px; color: var(--t-error); }

/* ── Bienvenida (siempre Casino, D20; marcos D-ElegirTheme-*, D-Bienvenida2-*, D-Bienvenida3-*) ── */
.kh-welcome-veil { position: fixed; inset: 0; z-index: 30; overflow: auto; background: var(--t-bg) var(--t-art-tall) center / cover no-repeat; color: var(--t-text); font-family: var(--t-font-text); }
.kh-welcome {
  min-height: 100%; padding: 26px 18px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.kh-welcome__progress { align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.kh-welcome__step { font-family: var(--t-font-display); font-weight: 700; font-size: 11px; letter-spacing: 3px; color: var(--t-border-strong); }
.kh-welcome__track { height: 6px; border-radius: 999px; background: var(--t-me-bg); overflow: hidden; }
.kh-welcome__bar { width: var(--pct, 33%); height: 6px; background: var(--t-accent); }
.kh-welcome__logo { width: 44px; height: 44px; border-radius: 50%; }
.kh-welcome__avatar { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--t-border-strong); object-fit: cover; }
.kh-welcome__title { margin: 0; font-family: var(--t-font-display); font-weight: 700; font-size: 20px; letter-spacing: 2px; color: var(--t-link); }
.kh-welcome[data-step="1"] .kh-welcome__title { font-size: 22px; letter-spacing: 3px; }
.kh-welcome__sub { margin: 4px 0 0; font-family: var(--t-font-accent); font-style: italic; font-size: 18px; color: var(--t-accent); }
.kh-welcome__field { align-self: stretch; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.kh-welcome__input { height: 50px; padding: 0 14px; border-radius: 12px; font-size: 22px; }
.kh-welcome__invent { align-self: flex-start; font-size: 11px; }
.kh-welcome__warn {
  margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--t-accent); background: var(--t-me-bg);
  font-size: 15px; font-weight: 500; color: var(--t-text);
}
.kh-welcome__error { margin: 0; font-size: 13px; color: var(--t-text); background: var(--t-error); border-radius: 8px; padding: 6px 10px; }
.kh-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kh-words__custom { align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: left; }
.kh-words__label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; letter-spacing: 1px; }
.kh-words__input { width: 100%; font-size: 19px; letter-spacing: 0; }
.kh-words__max { grid-column: span 2; margin: 0; font-size: 12px; color: var(--t-text-2); }
.kh-welcome__preview {
  align-self: stretch; border: 1px dashed var(--t-border-strong); border-radius: 14px; background: var(--t-surface);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.kh-welcome__preview-label { font-family: var(--t-font-display); font-size: 10px; letter-spacing: 3px; color: var(--t-text-2); }
.kh-welcome__preview-up { font-family: var(--t-font-display); font-weight: 700; font-size: 16px; letter-spacing: 2px; }
.kh-welcome__preview-line { font-family: var(--t-font-accent); font-style: italic; font-size: 17px; color: var(--t-accent); }
.kh-welcome__actions { margin-top: auto; align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.kh-welcome__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kh-welcome__later-btn { padding: 14px 10px; }
.kh-welcome__actions > .kh-welcome__later-btn { border: 1px solid var(--t-border-strong); color: var(--t-link); font-weight: 700; }
.kh-welcome__later { margin: 0; font-size: 12px; color: var(--t-text-2); }
html[data-size="desktop"] .kh-welcome-veil, html[data-size="tablet-h"] .kh-welcome-veil { background: rgba(4, 12, 9, 0.72); display: grid; place-items: center; padding: 24px; }
html[data-size="desktop"] .kh-welcome, html[data-size="tablet-h"] .kh-welcome {
  min-height: 0; width: 720px; max-width: 100%; background: var(--t-modal); border: 1px solid var(--t-border-strong); border-radius: 24px;
  box-shadow: var(--t-shadow-modal); padding: 32px 40px; gap: 20px;
}
html[data-size="desktop"] .kh-welcome[data-step="1"] { width: 980px; padding: 34px 40px 32px; gap: 22px; }
html[data-size="tablet-h"] .kh-welcome[data-step="1"] { width: 1040px; padding: 28px 34px; gap: 18px; }
html[data-size="desktop"] .kh-welcome .kh-themes, html[data-size="tablet-h"] .kh-welcome .kh-themes { gap: 16px; }
html[data-size="desktop"] .kh-welcome__actions, html[data-size="tablet-h"] .kh-welcome__actions { margin-top: 0; }
html[data-size="tablet-v"] .kh-welcome-veil { background: rgba(4, 12, 9, 0.72); }
html[data-size="tablet-v"] .kh-welcome {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 0; background: var(--t-modal); border-top: 1px solid var(--t-border-strong);
  border-radius: 26px 26px 0 0; box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.5); padding: 30px 40px 40px;
}
html[data-size="movil-h"] .kh-welcome { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 22px; text-align: left; }
html[data-size="movil-h"] .kh-welcome > * { grid-column: 1; }
html[data-size="movil-h"] .kh-welcome > .kh-themes, html[data-size="movil-h"] .kh-welcome > .kh-welcome__field,
html[data-size="movil-h"] .kh-welcome > .kh-words, html[data-size="movil-h"] .kh-welcome > .kh-words__custom,
html[data-size="movil-h"] .kh-welcome > .kh-welcome__preview { grid-column: 2; grid-row: 1 / span 4; }
html[data-kh] .kh-welcome-veil, html[data-kh] .kh-account-veil { position: absolute; }

/* Mi cuenta en escritorio y tablet H: título a la izquierda y × para cerrar a la derecha (D-Cuenta-Desktop) */
html[data-size="desktop"] .kh-account-sheet .kh-page-head, html[data-size="tablet-h"] .kh-account-sheet .kh-page-head { flex-direction: row-reverse; justify-content: space-between; }
html[data-size="desktop"] .kh-account-sheet .kh-back, html[data-size="tablet-h"] .kh-account-sheet .kh-back { font-size: 0; background: none; }
html[data-size="desktop"] .kh-account-sheet .kh-back::after, html[data-size="tablet-h"] .kh-account-sheet .kh-back::after { content: '×'; font-size: 24px; line-height: 1; }
html[data-size="desktop"] .kh-account-sheet .kh-page-head__title { font-size: 24px; }

/* Pie: hecho en Chile, año y versión (solo fuera de KitchHero). Discreto, con los colores del theme. */
.kh-footer { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center;
  font: 500 12px/1.4 var(--t-font-text, system-ui, sans-serif); color: var(--t-text-2, var(--t-text, currentColor)); }
.kh-shell[data-nav="bottom"] .kh-footer { padding-bottom: 12px; }

/* ── BUG-35: fila de juegos que se desliza (views/partials/scroll-hint.js) ─────────────────────────────────────────
   Solo con desborde real: section.kh-games[data-scroll=more|end]. Scroll-snap por tarjeta, degradado en el borde derecho
   mientras quede algo a la derecha y la fila ‹ · puntos · › bajo la lista. Cada theme ajusta colores y forma. */
.kh-games[data-scroll] .kh-games__grid { scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; }
.kh-games[data-scroll] .kh-game { scroll-snap-align: start; }
.kh-games[data-scroll="more"] .kh-games__grid {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--t-scroll-fade, 56px)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--t-scroll-fade, 56px)), transparent);
}
.kh-scroll-more { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 2px; }
.kh-scroll-more__btn {
  display: grid; place-items: center; width: var(--t-tap); height: var(--t-tap); padding: 0 0 2px; border: 1px solid var(--t-border-strong);
  border-radius: 50%; background: var(--t-surface); color: var(--t-link); font: 400 24px/1 var(--t-font-text); cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.kh-scroll-more__btn:active { transform: scale(0.94); }
.kh-scroll-more__btn[hidden] { display: grid !important; visibility: hidden; }   /* sin salto: los puntos no se mueven */
.kh-scroll-more__btn[data-dir="next"] { animation: kh-scroll-nudge 1.4s var(--ease-standard) 0.6s 2; }
@keyframes kh-scroll-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .kh-scroll-more__btn[data-dir="next"] { animation: none; } }
.kh-scroll-more__dots { display: flex; align-items: center; gap: 6px; }
.kh-scroll-more__dot { width: 7px; height: 7px; border-radius: 4px; background: var(--t-border); opacity: 0.7;
  transition: width var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard); }
.kh-scroll-more__dot[data-on] { width: 18px; background: var(--t-accent); opacity: 1; }

/* ── Vista previa de un juego (req. 4.4 · D23, views/partials/preview.js) ───────────────────────────────────────────
   Botón 👀 chico en la esquina de la tarjeta (con texto en el destacado) y diálogo con el estilo del theme (tokens). */
.kh-game:has(> .kh-preview-btn) { position: relative; }
.kh-preview-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; min-height: 32px; padding: 0 6px;
  border: 1px solid var(--t-border-strong); border-radius: var(--t-radius-btn); background: var(--t-surface-2, var(--t-surface));
  color: var(--t-link); font: 600 12px/1 var(--t-font-text); letter-spacing: var(--t-ls-label); cursor: pointer;
}
.kh-game > .kh-preview-btn { position: absolute; top: 6px; right: 6px; z-index: 1; }
.kh-game > .kh-preview-btn::before { content: ''; position: absolute; inset: -6px; }   /* área táctil de 44 px */
.kh-preview-btn[data-variant="full"] { min-height: var(--t-tap); padding: 0 14px; font-family: var(--t-font-display); }
.kh-featured:has(.kh-preview-btn) { position: relative; }
.kh-featured__body > .kh-preview-btn { align-self: flex-start; width: fit-content; margin-top: 8px; }
.kh-preview-btn__eye { font-size: 16px; line-height: 1; }

html[data-kh-modal] body { overflow: hidden; }
.kh-pv-veil {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, 0.62);
  animation: kh-pv-fade var(--duration-base) var(--ease-enter);
}
.kh-pv {
  position: relative; display: flex; flex-direction: column; gap: 12px; width: min(560px, 100%); max-height: 100%;
  overflow: auto; padding: 16px; border: 1px solid var(--t-border-strong); border-radius: var(--t-radius-panel);
  background: var(--t-modal); color: var(--t-text); box-shadow: var(--t-shadow-modal);
  animation: kh-pv-in var(--duration-base) var(--ease-enter);
}
@keyframes kh-pv-fade { from { opacity: 0; } }
@keyframes kh-pv-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .kh-pv-veil, .kh-pv { animation: none; } }
.kh-pv__head { display: flex; align-items: center; gap: 12px; }
.kh-pv__title { flex: 1; margin: 0; font: 700 18px/1.2 var(--t-font-display); letter-spacing: var(--t-ls-title); }
.kh-pv__close {
  display: grid; place-items: center; width: var(--t-tap); height: var(--t-tap); flex: none; padding: 0 0 2px; border: 1px solid var(--t-border);
  border-radius: 50%; background: transparent; color: var(--t-text); font-size: 26px; line-height: 1; cursor: pointer;
}
.kh-pv__carousel { position: relative; display: flex; flex-direction: column; gap: 10px; }
.kh-pv__track { position: relative; border-radius: var(--t-radius-card); overflow: hidden; background: var(--t-surface); touch-action: pan-y; }
.kh-pv__slide { margin: 0; }
.kh-pv__img { display: block; width: 100%; max-height: 62vh; max-height: 62dvh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.kh-pv__nav {
  position: absolute; top: calc(50% - 22px - 14px); width: var(--t-tap); height: var(--t-tap); padding: 0 0 2px; display: grid; place-items: center;
  border: 1px solid var(--t-border-strong); border-radius: 50%; background: var(--t-modal); color: var(--t-link); font-size: 24px; line-height: 1; cursor: pointer;
}
.kh-pv__nav[data-dir="prev"] { left: 8px; }
.kh-pv__nav[data-dir="next"] { right: 8px; }
.kh-pv__dots { display: flex; justify-content: center; gap: 4px; }
.kh-pv__dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.kh-pv__dot::after { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--t-border); transition: width var(--duration-base) var(--ease-standard); }
.kh-pv__dot[aria-current="true"]::after { width: 20px; background: var(--t-accent); }
.kh-pv__video { display: block; width: 100%; max-height: 56vh; max-height: 56dvh; border-radius: var(--t-radius-card); background: #000; }
.kh-pv__note { margin: 0; color: var(--t-text-2); font-size: 14px; line-height: 1.4; }
.kh-pv__actions { display: flex; justify-content: center; }
.kh-pv__actions .kh-btn { min-width: 200px; }
html[data-size="movil-v"] .kh-pv-veil { align-items: end; padding: 0; }
html[data-size="movil-v"] .kh-pv { width: 100%; border-radius: var(--t-radius-panel) var(--t-radius-panel) 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }