/* OM Taekwondo — estilos de aplicación sobre el sistema Modernist (tokens.css).
   Reproduce los comportamientos que el prototipo resolvía con `style-hover`. */

html, body { margin: 0; min-height: 100%; background: var(--color-bg); }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }
button { font-family: inherit; }
input[type=range] { accent-color: #ec3013; }
input[type=date] { font-family: inherit; }

/* — sidebar / nav — */
.nav-shell {
  display: flex; flex-direction: column; width: 232px; flex: none;
  background: #201e1d; color: #f3f2f2; position: sticky; top: 0;
  align-self: flex-start; height: 100vh; overflow-x: auto; overflow-y: hidden; z-index: 5;
}
.nav-brand-row {
  display: flex; align-items: center; gap: 10px; padding: 20px 16px;
  border-bottom: 2px solid #444141; flex: none;
}
.nav-brand-mark svg { display: block; }
.nav-brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-brand-title {
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
  letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
}
.nav-brand-tenant {
  font-size: 11px; color: #9b9797; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 150px;
}
.nav-items { display: flex; flex-direction: column; gap: 0; padding: 12px 0; flex: 1; min-width: 0; }
.nav-btn {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 0;
  cursor: pointer; text-align: left; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: transparent; color: #d7d3d3; transition: background .12s, color .12s;
}
.nav-btn:hover { background: #3a3635; }
.nav-btn.active { background: var(--color-accent); color: #f3f2f2; }
.nav-foot { padding: 16px 14px; border-top: 1px solid #444141; font-size: 11px; line-height: 1.5; color: #bab6b6; }

/* — hover helpers — */
.hover-surface:hover { background: var(--color-surface); }
.hover-neutral:hover { background: var(--color-neutral-200); }
.row-click { cursor: pointer; transition: background .12s; }
.row-click:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — móvil: nav horizontal — */
@media (max-width: 859px) {
  #app { flex-direction: column; }
  .nav-shell { flex-direction: row; width: 100%; height: auto; overflow-x: auto; overflow-y: hidden; }
  .nav-brand-row { border-bottom: 0; border-right: 1px solid #444141; padding: 12px 14px; }
  .nav-brand-text { display: none; } /* colapsado: sólo el símbolo */
  .nav-items { flex-direction: row; padding: 0; }
  .nav-foot { display: none; }
}

/* transiciones de color 120ms, sin más animación */
.btn, .seg button, .nav-btn { transition: background .12s, color .12s; }

/* ══ Autenticación (login / registro / recuperación) ══════════════════════════ */
.auth-wrap { display: flex; min-height: 100vh; width: 100%; }
.auth-brand {
  flex: 1; background: #201e1d; color: #f3f2f2;
  padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between;
  border-right: 2px solid #000;
}
.auth-brand-mark svg { display: block; }
.auth-hero {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; margin: 0;
}
.auth-hero .rule { display: block; width: 64px; height: 4px; background: #ec3013; margin-bottom: 22px; }
.auth-brand-foot-row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  flex-wrap: wrap; border-top: 2px solid #605d5d; padding-top: 14px;
}
.auth-brand-foot { font-size: 12px; color: #bab6b6; line-height: 1.6; max-width: 340px; }
.auth-brand-foot .gold { color: #c9a227; }
.auth-brand-by {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; white-space: nowrap;
}

.auth-panel {
  width: min(460px, 100%); flex: none; background: var(--color-bg);
  padding: 48px 44px; display: flex; flex-direction: column; justify-content: center;
}
.auth-kicker {
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-accent-700); font-weight: 600;
}
.auth-panel h1 { font-size: 30px; margin: 6px 0 4px; letter-spacing: -0.02em; }
.auth-sub { font-size: 13px; color: var(--color-neutral-700); margin: 0 0 22px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.auth-alt { font-size: 13px; color: var(--color-neutral-700); margin-top: 20px; }
.auth-link {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--color-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.auth-msg { border-left: 3px solid; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.auth-msg.err { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); }
.auth-msg.ok { border-color: #c9a227; background: #faf6e6; color: #5c4d10; }
.auth-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  word-break: break-all; background: var(--color-surface);
  border: 1px solid var(--color-divider); padding: 8px 10px; margin-top: 8px;
}
@media (max-width: 819px) {
  .auth-brand { display: none; }
  .auth-panel { width: 100%; padding: 40px 24px; }
}

/* ══ Acceso multi-tenant (Fase 2): código de organización, selector de
   espacio, MFA del rol director ══════════════════════════════════════ */
.auth-codigo-row { display: flex; gap: 8px; }
.auth-codigo-row .input { flex: 1; }
.auth-codigo-chip {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 2px solid var(--brand-ink); padding: 10px 12px; font-size: 13px;
}
.auth-codigo-chip strong { font-weight: 700; }
.auth-tabs { display: flex; border: 2px solid var(--brand-ink); margin-bottom: 16px; }
.auth-tab {
  flex: 1; background: transparent; border: 0; cursor: pointer; font: inherit;
  padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--brand-ink);
}
.auth-tab.active { background: var(--brand-ink); color: #f3f2f2; }
.auth-tab + .auth-tab { border-left: 2px solid var(--brand-ink); }
.auth-espacios-list { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; }
.auth-espacio-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: var(--color-bg); border: 2px solid var(--color-divider); padding: 12px 14px;
  font: inherit; width: 100%;
}
.auth-espacio-item:hover { border-color: var(--brand-ink); }
.auth-espacio-nombre { font-weight: 700; font-size: 14px; }
.auth-espacio-meta { font-size: 12px; color: var(--color-neutral-700); }
.auth-mfa-code { font-size: 28px; letter-spacing: 0.3em; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.auth-mfa-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: 0.08em;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  padding: 10px 12px; word-break: break-all;
}

/* ══ Sesiones · Modo tatami ═════════════════════════════════════════════════ */
.tatami-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); flex: 1; }
.tatami-grid > :first-child { border-right: 2px solid #444141; }
@media (max-width: 1179px) {
  .tatami-grid { grid-template-columns: 1fr; }
  .tatami-grid > :first-child { border-right: 0; border-bottom: 2px solid #444141; }
}