/* NANNAGRAFÍA — Estilos de aplicación basados exclusivamente en tokens de marca */

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--nanna-color-paper);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--nanna-color-champagne);
  border-radius: var(--nanna-radius-pill);
}

/* Header & Navigation */
.nanna-header {
  background: var(--nanna-color-ivory);
  border-bottom: var(--nanna-border-hairline);
  box-shadow: var(--nanna-shadow-soft);
}

.nanna-badge-kit {
  background: var(--nanna-color-paper);
  color: var(--nanna-color-gold);
  border: var(--nanna-border-hairline);
  border-radius: var(--nanna-radius-pill);
  font-size: var(--nanna-text-xs);
  letter-spacing: 0.08em;
}

.nanna-subtitle {
  color: var(--nanna-color-sage);
  font-size: var(--nanna-text-xs);
}

/* Timer Widget */
.nanna-timer-box {
  background: var(--nanna-color-paper);
  border: var(--nanna-border-hairline);
  border-radius: var(--nanna-radius-lg);
}

.nanna-timer-display {
  background: var(--nanna-color-warm-white);
  color: var(--nanna-color-burgundy);
  border: var(--nanna-border-soft);
  border-radius: var(--nanna-radius-md);
}

.nanna-btn-primary {
  background: var(--nanna-color-burgundy);
  color: var(--nanna-color-white);
  border-radius: var(--nanna-radius-md);
  font-size: var(--nanna-text-xs);
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.nanna-btn-primary:hover {
  background: var(--nanna-color-wine);
}

.nanna-btn-preset {
  background: var(--nanna-color-warm-white);
  color: var(--nanna-color-charcoal);
  border: var(--nanna-border-soft);
  border-radius: var(--nanna-radius-md);
  font-size: var(--nanna-text-xs);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nanna-btn-preset:hover {
  background: var(--nanna-color-sand);
  border: var(--nanna-border-accent);
}

/* Day Tabs */
.day-tab {
  border-radius: var(--nanna-radius-md);
  font-size: var(--nanna-text-xs);
  transition: all 0.2s ease;
}

.day-tab--active {
  background: var(--nanna-color-burgundy);
  color: var(--nanna-color-white);
  border: 1px solid var(--nanna-color-burgundy);
  box-shadow: var(--nanna-shadow-gold);
}

.day-tab--inactive {
  background: var(--nanna-color-paper);
  color: var(--nanna-color-charcoal);
  border: var(--nanna-border-soft);
}

.day-tab--inactive:hover {
  background: var(--nanna-color-sand);
  border: var(--nanna-border-hairline);
}

/* Kit Setup Banner */
.nanna-setup-banner {
  background: linear-gradient(135deg, var(--nanna-color-ivory) 0%, var(--nanna-color-paper) 100%);
  border: var(--nanna-border-hairline);
  border-radius: var(--nanna-radius-lg);
  box-shadow: var(--nanna-shadow-soft);
}

.nanna-setup-divider {
  border-bottom: var(--nanna-border-hairline);
}

.nanna-rounds-pill {
  background: var(--nanna-color-warm-white);
  color: var(--nanna-color-gold);
  border: var(--nanna-border-hairline);
  border-radius: var(--nanna-radius-md);
  font-size: var(--nanna-text-xs);
}

.nanna-kit-callout {
  background: var(--nanna-color-warm-white);
  border: var(--nanna-border-hairline);
  border-left: 3px solid var(--nanna-color-gold);
  border-radius: var(--nanna-radius-md);
  color: var(--nanna-color-charcoal);
  font-size: var(--nanna-text-xs);
}

.nanna-progress-track {
  background: var(--nanna-color-sand);
  border-radius: var(--nanna-radius-pill);
}

.nanna-progress-bar {
  background: var(--nanna-color-gold);
  border-radius: var(--nanna-radius-pill);
}

/* Exercise Cards */
.nanna-exercise-card {
  background: var(--nanna-color-white);
  border: var(--nanna-border-soft);
  border-radius: var(--nanna-radius-lg);
  box-shadow: var(--nanna-shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.nanna-exercise-card--done {
  background: var(--nanna-color-ivory);
  border: var(--nanna-border-accent);
  box-shadow: var(--nanna-shadow-gold);
}

.nanna-ex-num {
  background: var(--nanna-color-paper);
  color: var(--nanna-color-burgundy);
  border: var(--nanna-border-hairline);
  border-radius: var(--nanna-radius-md);
  font-family: var(--nanna-font-display);
}

.nanna-ex-num--done {
  background: var(--nanna-color-gold);
  color: var(--nanna-color-white);
  border: 1px solid var(--nanna-color-gold);
  border-radius: var(--nanna-radius-md);
  font-family: var(--nanna-font-display);
}

.nanna-reps-badge {
  background: var(--nanna-color-ivory);
  color: var(--nanna-color-burgundy);
  border: var(--nanna-border-hairline);
  border-radius: var(--nanna-radius-md);
  font-size: var(--nanna-text-xs);
}

.nanna-rig-canvas {
  background: var(--nanna-color-ivory);
  border: var(--nanna-border-hairline);
  border-radius: var(--nanna-radius-md);
}

.nanna-btn-complete {
  background: var(--nanna-color-ivory);
  color: var(--nanna-color-charcoal);
  border: var(--nanna-border-soft);
  border-radius: var(--nanna-radius-md);
  font-size: var(--nanna-text-xs);
  transition: all 0.2s ease;
}

.nanna-btn-complete:hover {
  background: var(--nanna-color-paper);
  border: var(--nanna-border-accent);
}

.nanna-btn-complete--done {
  background: var(--nanna-color-paper);
  color: var(--nanna-color-gold);
  border: var(--nanna-border-accent);
  border-radius: var(--nanna-radius-md);
  font-size: var(--nanna-text-xs);
}

/* Rules Footer Section */
.nanna-rules-card {
  background: var(--nanna-color-ivory);
  border: var(--nanna-border-hairline);
  border-radius: var(--nanna-radius-lg);
  box-shadow: var(--nanna-shadow-soft);
}

.nanna-rule-item {
  background: var(--nanna-color-warm-white);
  border: var(--nanna-border-soft);
  border-radius: var(--nanna-radius-md);
}