@import "./tokens.css";
@import "./components.css";
@import "./button.css";
@import "./nav.css";
@import "./sidebar.css";
@import "./agenda.css";
@import "./agenda-vista-mes.css";
@import "./agenda-vista-semana.css";
@import "./agenda-vista-dia.css";
@import "./modal-cita.css";

* {
  font-family: "Kanit", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-bg-app);
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.app {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  background-color: var(--color-bg-app);
  transition: background-color 150ms ease;
}

.main {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-bg-app);
  transition: background-color 150ms ease;
}

/* ── Guard de sesión: overlay de carga ───────────────────────────────────── */

.guard-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-bg-app);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-family: "Kanit", sans-serif;
  transition: opacity 200ms ease;
}

.guard-loading[hidden] {
  display: none;
}

.guard-loading__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-brand-blue);
  border-radius: 50%;
  animation: guard-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes guard-spin {
  to { transform: rotate(360deg); }
}

/* ── Pantalla "sin acceso" (inyectada por session-guard.js) ─────────────── */

.sin-acceso-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-app);
  padding: 24px;
  font-family: "Kanit", sans-serif;
}

.sin-acceso-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
}

.sin-acceso-icono {
  color: var(--color-danger);
  opacity: 0.8;
}

.sin-acceso-titulo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.sin-acceso-texto {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.sin-acceso-acciones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.sin-acceso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 100%;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}

.sin-acceso-btn--primary {
  background: var(--color-brand-blue);
  color: #ffffff;
  border: none;
}
.sin-acceso-btn--primary:hover {
  background: var(--color-brand-blue-hover);
}

.sin-acceso-btn--secondary {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.sin-acceso-btn--secondary:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: rgba(255, 79, 120, 0.06);
}

/* ── Nav: bloque de sesión (RF-04) ───────────────────────────────────────── */

.nav__session {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;         /* empuja el bloque a la derecha */
}

.nav__session-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.nav__session-producto {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__session-plan {
  font-size: var(--font-size-xs);
  color: var(--color-white);
  white-space: nowrap;
  background: var(--color-brand-gradient);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 2px var(--space-2);
  font-family: inherit;
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
  transition:
    filter var(--duration-sm),
    border-color var(--duration-sm);
}
.nav__session-plan:hover {
  filter: brightness(1.1);
  border-color: transparent;
  color: var(--color-white);
}

/* Estado de carga para los data-session */
[data-session][aria-busy="true"] {
  opacity: 0.4;
}

/* ── Botón logout en nav ─────────────────────────────────────────────────── */

.nav__logout {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  height: 32px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-color: transparent;
  background: transparent;
  white-space: nowrap;
}

.nav__logout.button--secondary:hover:not(:disabled),
.nav__logout:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: rgba(255, 79, 120, 0.06);
}

.nav__logout-texto {
  display: none;
}

@media (min-width: 640px) {
  .nav__logout-texto {
    display: inline;
  }
}

/* Quitar el margin-left: auto del theme-toggle ya que ahora lo tiene .nav__session */
.nav__theme-toggle {
  margin-left: 0;
}