/* ============================================================
   Gym Booking — Kinetic Volt / Athletic High-Voltage Dark
   Deep charcoal layered surfaces, neon volt accent for primary
   CTAs and active states, semantic sport colors (emerald =
   confirmed, cyan = automation/bot, red = danger/critical).
   Condensed heavy display type, tight tracking, uppercase
   headers. Thin translucent borders, soft elevation, live
   pulse dots for automation/telemetry states.
   ============================================================ */
:root {
  --bg: #0c0e11;
  --bg-elevated: #14171d;
  --bg-elevated-2: #181c24;
  --bg-sunken: #0a0b0d;
  --text: #f2f4f6;
  --muted: #8b93a1;
  --muted-dim: #5c6472;

  --volt: #ccff00;
  --volt-ink: #0c0e11;
  --volt-hover: #b8e600;

  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.14);
  --info: #38bdf8;
  --info-bg: rgba(56, 189, 248, 0.14);
  --danger: #ef4444;
  --danger-soft: #f87171;
  --danger-bg: rgba(239, 68, 68, 0.14);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.14);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --radius: 10px;
  --radius-lg: 12px;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  background-image:
    radial-gradient(
      ellipse 900px 500px at 15% -10%,
      rgba(204, 255, 0, 0.05),
      transparent 60%
    ),
    radial-gradient(
      ellipse 700px 500px at 100% 0%,
      rgba(56, 189, 248, 0.04),
      transparent 55%
    );
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ----- Topbar / brand ----- */
/* ----- Topbar / navigation ----- */

.topbar {
  background: rgba(10, 11, 13, 0.92);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  gap: 1.5rem;
}

/* ----- Brand ----- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  background: var(--volt);
  color: var(--volt-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(204, 255, 0, 0.28);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.brand:hover .brand-mark {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(204, 255, 0, 0.45);
}

.brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* ----- Main navigation ----- */

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 0.7rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius);
  transition:
    color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.nav-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.nav-link.is-active,
.nav-link[aria-current="page"] {
  color: var(--volt);
  background: rgba(204, 255, 0, 0.08);
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ----- User section ----- */

.nav-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}

.nav-user form {
  display: block;
  margin: 0;
}

/* ----- Logout ----- */

.logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.logout-btn:hover {
  color: var(--danger-soft);
  border-color: rgba(239, 68, 68, 0.35);
  background: var(--danger-bg);
}

/* ----- Type scale ----- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
}
h1 {
  font-size: 1.55rem;
  margin-top: 0;
  margin-bottom: 1rem;
}
h2 {
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 0.75rem;
}
h3 {
  font-size: 0.95rem;
  margin: 0;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-left: 3px solid var(--danger);
  background: var(--bg-elevated);
}

.alert-error {
  background: var(--danger-bg);
  color: var(--danger-soft);
  border-color: rgba(239, 68, 68, 0.3);
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.alert-icon {
  font-size: 1.15rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.alert-text {
  flex: 1;
  line-height: 1.45;
}

.alert-warn {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: rgba(251, 191, 36, 0.3);
  border-left-color: var(--warning);
}

/* Penalty banner — shown when one or more classes are in the gym's
   +5min lockout window (status_name=PENALIZED). Uses the volt accent
   (ccff00) so it stands out without looking like an error. */
.banner-penalty {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0 0 1.5rem 0;
  padding: 0.95rem 1.1rem;
  background: linear-gradient(
    135deg,
    rgba(204, 255, 0, 0.10),
    rgba(204, 255, 0, 0.04)
  );
  border: 1px solid rgba(204, 255, 0, 0.35);
  border-left: 4px solid var(--volt);
  border-radius: 8px;
  color: var(--text);
}

.banner-penalty-icon {
  font-size: 1.45rem;
  line-height: 1.2;
  flex-shrink: 0;
  filter: hue-rotate(0deg);  /* keep the lock emoji visually distinct */
}

.banner-penalty-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  line-height: 1.4;
}

.banner-penalty-body strong {
  color: var(--volt);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}

.banner-penalty-detail {
  color: var(--muted);
  font-size: 0.86rem;
}

/* ----- Auth / login ----- */
.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  min-height: calc(100vh - 5rem);
  margin: -1.5rem;
  gap: 0;
}

.auth-side {
  background:
    radial-gradient(
      ellipse 600px 400px at 30% 20%,
      rgba(204, 255, 0, 0.09),
      transparent 60%
    ),
    radial-gradient(
      ellipse 500px 500px at 90% 90%,
      rgba(56, 189, 248, 0.08),
      transparent 55%
    ),
    var(--bg-sunken);
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--border);
}

.brand-mark-lg {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

.auth-side-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2.3rem;
  line-height: 1.1;
  letter-spacing: 0.005em;
  margin: 0 0 0.9rem 0;
  max-width: 16ch;
}
.auth-side-title .volt {
  color: var(--volt);
}

.auth-side-copy {
  color: var(--muted);
  font-size: 1rem;
  max-width: 32ch;
  margin: 0;
}

.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.auth-card h2 {
  margin-bottom: 0.25rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  gap: 0.3rem;
}

input,
select,
textarea {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: inherit;
  background: var(--bg-sunken);
  color: var(--text);
}

input::placeholder {
  color: var(--muted-dim);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--volt);
  outline-offset: 1px;
  border-color: var(--volt);
}

/* ----- Buttons ----- */
.btn {
  position: relative;
  padding: 0.6rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  transition:
    background-color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--volt);
  color: var(--volt-ink);
  box-shadow: 0 0 0 rgba(204, 255, 0, 0);
}
.btn-primary:hover:not(:disabled) {
  background: var(--volt-hover);
  box-shadow: 0 0 24px rgba(204, 255, 0, 0.3);
}
.btn-primary:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-dim);
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.btn-danger {
  background: transparent;
  color: var(--danger-soft);
  border-color: rgba(239, 68, 68, 0.4);
}
.btn-danger:hover {
  background: var(--danger-bg);
}

.btn-link {
  background: none;
  border: none;
  color: var(--info);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  padding: 0;
}
.btn-link:hover {
  text-decoration: underline;
}
.btn-link.danger {
  color: var(--danger-soft);
}

/* Permanent-access toggle button inside the admin emails table.
   Two states: OFF (default neutral blue, "Otorgar") and ON (warm
   tint, "Quitar") so the admin can read the current state at a
   glance without inspecting the action verb. */
.permanent-cell .btn-link.permanent-off {
  color: var(--info);
}
.permanent-cell .btn-link.permanent-on {
  color: var(--volt);
  font-weight: 600;
}
.permanent-cell .btn-link.permanent-off:hover {
  color: var(--volt-hover);
}

.emails-row.is-permanent {
  /* subtle lime border-left so the row itself gently hints at the
     permanent status without being noisy. Doesn't apply to the
     admin's own row (the CSS class is still on it, but the lack
     of left-border content + the muted cell keep it neutral). */
}

/* Inline spinner shown inside buttons via hx-indicator */
.btn-spinner {
  display: none;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.htmx-request .btn-spinner {
  display: inline-block;
}
.htmx-request .btn-label {
  opacity: 0.75;
}

.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--border-strong);
  border-top-color: var(--volt);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

.branch-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.branch-row select {
  flex: 1;
  min-width: 200px;
}

.classes-header {
  margin: 0 0 0.75rem 0;
}

/* ----- Week toggle ----- */
.week-toggle {
  display: inline-flex;
  gap: 0;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}
.week-btn {
  padding: 0.5rem 1.1rem;
  background: transparent;
  color: var(--muted);
  border: none;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
  white-space: nowrap;
}
.week-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.week-btn.active {
  background: var(--volt);
  color: var(--volt-ink);
}
.week-btn + .week-btn {
  border-left: 1px solid var(--border);
}

/* ----- Filters ----- */
.filters {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.filter {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.filter select {
  min-width: 140px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9rem;
  color: var(--text);
}

#clear-filters {
  align-self: end;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.htmx-indicator.htmx-request {
  opacity: 1;
}

/* ----- Day groups ----- */
.day-group + .day-group {
  margin-top: 1.5rem;
}

.day-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--volt);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
}

/* ----- Class / booking / run cards ----- */
.class-card,
.booking-card,
.run-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
}
.class-card:hover,
.booking-card:hover,
.run-card:hover {
  border-color: var(--border-strong);
}

.class-card.status-available {
  border-left-color: var(--volt);
}
.class-card.status-registered {
  border-left-color: var(--success);
}
.class-card.status-full {
  border-left-color: var(--border);
  opacity: 0.55;
}
.class-card.status-bot-scheduled {
  border-left-color: var(--info);
  background:
    linear-gradient(180deg, rgba(56, 189, 248, 0.06), transparent 40%),
    var(--bg-elevated);
}

.run-card.status-pending {
  border-left-color: var(--warning);
}
.run-card.status-running {
  border-left-color: var(--info);
}
.run-card.status-done {
  border-left-color: var(--success);
}
.run-card.status-failed,
.run-card.status-cancelled,
.run-card.status-interrupted {
  border-left-color: var(--danger);
}

.class-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.class-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.class-meta {
  font-size: 0.85rem;
  color: var(--muted);
}

.class-meta > div + div {
  margin-top: 0.15rem;
}

/* ----- Capacity bar (transitions color as it fills) ----- */
.capacity-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.capacity-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.capacity-bar-fill {
  height: 100%;
  background: var(--success);
  transition: background-color 0.2s ease;
}
.capacity-bar-fill.cap-low {
  background: var(--success);
}
.capacity-bar-fill.cap-mid {
  background: var(--warning);
}
.capacity-bar-fill.cap-high {
  background: var(--danger);
}

.capacity-text {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ----- Live status dot (pulse) — telemetry / automation feel ----- */
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
  flex-shrink: 0;
}
.status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: pulse-dot 1.6s ease-out infinite;
}
@keyframes pulse-dot {
  0% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  70% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ----- Status badges ----- */
.status-badge {
  font-size: 0.65rem;
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.status-badge.status-available,
.status-badge.status-success {
  background: rgba(204, 255, 0, 0.12);
  color: var(--volt);
  border-color: rgba(204, 255, 0, 0.3);
}
.status-badge.status-done {
  background: var(--success-bg);
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.3);
}
.status-badge.status-registered {
  background: var(--success-bg);
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.3);
}
.status-badge.status-full,
.status-badge.status-failed,
.status-badge.status-cancelled,
.status-badge.status-interrupted,
.status-badge.status-danger {
  background: var(--danger-bg);
  color: var(--danger-soft);
  border-color: rgba(239, 68, 68, 0.3);
}
.status-badge.status-running,
.status-badge.status-pending,
.status-badge.status-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border-color: rgba(251, 191, 36, 0.3);
}
.status-badge.status-unknown {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-color: var(--border);
}
.status-badge.status-bot-scheduled {
  background: var(--info-bg);
  color: var(--info);
  border-color: rgba(56, 189, 248, 0.3);
}

.class-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.class-actions form {
  display: inline;
  margin: 0;
}

/* ----- Weekly focus ----- */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}

.focus-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  text-align: center;
}

.focus-today {
  background: rgba(204, 255, 0, 0.1);
  border-color: rgba(204, 255, 0, 0.35);
}

.focus-day {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.focus-today .focus-day {
  color: var(--volt);
}

.focus-name {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.3;
}

/* ----- Cuenta / suscripción ----- */
.status-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ----- Admin panel ----- */
.inline-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row;
}
.inline-form input[type="email"] {
  flex: 1 1 220px;
  min-width: 180px;
}
.inline-form input[type="text"] {
  flex: 2 1 280px;
  min-width: 200px;
}

.emails-table-wrap,
.runs-table-wrap {
  overflow-x: auto;
}

.emails-table,
.runs-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
.emails-table th,
.runs-table th,
.emails-table td,
.runs-table td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.emails-table th,
.runs-table th {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.06em;
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
}
.emails-table tr:last-child td,
.runs-table tr:last-child td {
  border-bottom: none;
}
.emails-table tr.is-disabled td {
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
}
.emails-table tr.is-disabled .email-cell {
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 1px;
}
.runs-table .actions,
.emails-table .actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
  vertical-align: middle;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  text-transform: uppercase;
}
.badge-enabled {
  background: var(--success-bg);
  color: var(--success);
  border-color: rgba(16, 185, 129, 0.3);
}
.badge-disabled {
  background: var(--danger-bg);
  color: var(--danger-soft);
  border-color: rgba(239, 68, 68, 0.3);
}
.badge-self {
  background: var(--info-bg);
  color: var(--info);
  border-color: rgba(56, 189, 248, 0.3);
  margin-left: 0.4rem;
}
.emails-table .email-cell {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: none;
}

.empty {
  color: var(--muted);
  text-align: center;
  padding: 1.5rem;
  font-style: italic;
}

.error {
  color: var(--danger-soft);
  padding: 1rem;
  text-align: center;
}

.log {
  background: var(--bg-sunken);
  color: #cdd3db;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.45;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  padding: 0.75rem 1rem;
  background: var(--bg-elevated-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  border-left: 3px solid var(--volt);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  animation: slideIn 0.2s ease;
  pointer-events: auto;
  max-width: 360px;
}

.toast-success {
  border-left-color: var(--success);
}
.toast-error {
  border-left-color: var(--danger);
}
.toast-info {
  border-left-color: var(--info);
}

@keyframes slideIn {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ----- Confirmation modal ----- */
.modal-overlay {
  background: rgba(6, 7, 9, 0.7);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

.modal {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--danger);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.25rem;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.modal-wide {
  max-width: 820px;
}
.run-log-body {
  max-height: 60vh;
  overflow-y: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  line-height: 1.45;
}

.modal-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--text);
}

.modal-body {
  margin: 0 0 1.25rem;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.95rem;
}
.modal-body strong {
  color: var(--text);
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ----- Book fallback modal ----- */
/* Stacked layout: the two primary actions are full-width and the
   Cancel is below them, so the user's eye naturally compares the
   trade-offs without scanning a horizontal row. */
.modal-actions-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  margin: 0.5rem 0 1rem;
}
.modal-actions-stack .btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.65rem 0.9rem;
  line-height: 1.25;
  text-align: left;
}
.modal-actions-stack .btn-hint {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.78;
  margin-top: 0.15rem;
}
/* Secondary ("Solo reservar") looks quieter than the primary
   ("Reservar y rastrear") so the recommended path is the visual
   default. */
.modal-actions-stack .btn-secondary {
  background: var(--bg-sunken, #f4f4f6);
  border-color: var(--border, #d8d8de);
  color: var(--text, #222);
}

/* ----- Help / docs page ----- */
/* Article that wraps the server-rendered markdown. We use a sensible
   max-width and only style elements the markdown actually emits (h1-h4,
   p, ul/ol, table, code, blockquote, hr). */
.help-article {
  max-width: 780px;
  margin: 1.5rem auto 3rem;
  line-height: 1.65;
  color: var(--text);
}
.help-article h1 {
  font-size: 1.9rem;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border, #2a2a3a);
}
.help-article h2 {
  font-size: 1.35rem;
  margin: 2.2rem 0 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border, #2a2a3a);
}
.help-article h3 {
  font-size: 1.1rem;
  margin: 1.4rem 0 0.4rem;
}
.help-article h4 {
  font-size: 1rem;
  margin: 1rem 0 0.3rem;
}
.help-article p {
  margin: 0.6rem 0;
}
.help-article ul,
.help-article ol {
  margin: 0.6rem 0;
  padding-left: 1.6rem;
}
.help-article li {
  margin: 0.25rem 0;
}
.help-article hr {
  border: 0;
  border-top: 1px solid var(--border, #2a2a3a);
  margin: 2rem 0;
}
.help-article strong {
  color: var(--text);
}
.help-article code {
  background: var(--code-bg, #1a1a26);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.help-article pre {
  background: var(--code-bg, #1a1a26);
  padding: 0.8rem 1rem;
  border-radius: 6px;
  overflow-x: auto;
  line-height: 1.4;
}
.help-article pre code {
  background: transparent;
  padding: 0;
}
.help-article blockquote {
  border-left: 3px solid var(--accent, #5a8dee);
  padding: 0.3rem 0 0.3rem 1rem;
  margin: 1rem 0;
  color: var(--text-muted, #999);
}
.help-article table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.95em;
}
.help-article th,
.help-article td {
  border: 1px solid var(--border, #2a2a3a);
  padding: 0.45rem 0.7rem;
  text-align: left;
}
.help-article th {
  background: var(--code-bg, #1a1a26);
  font-weight: 600;
}
/* ----- Responsive ----- */

@media (max-width: 760px) {
  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-side {
    padding: 2rem;
    text-align: left;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .auth-side-title {
    font-size: 1.7rem;
  }

  .topbar-inner {
    flex-wrap: wrap;
    gap: 0.7rem;
  }

  .main-nav {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .nav-links {
    flex: 1;
    justify-content: center;
  }

  .nav-link {
    flex: 1;
    justify-content: center;
    padding: 0.5rem 0.4rem;
  }

  .nav-user {
    padding-left: 0.5rem;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 1rem;
  }

  .topbar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .main-nav {
    width: 100%;
    gap: 0.5rem;
  }

  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  .filter select {
    min-width: 0;
    width: 100%;
  }

  #clear-filters {
    align-self: flex-start;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .focus-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .help-article {
    padding: 0 0.5rem;
  }

  .help-article h1 {
    font-size: 1.5rem;
  }

  .help-article h2 {
    font-size: 1.2rem;
  }

  .help-article table {
    font-size: 0.85em;
  }
}

@media (max-width: 480px) {
  .brand-text {
    font-size: 1rem;
  }

  .nav-link {
    font-size: 0;
  }

  .nav-icon {
    font-size: 0.85rem;
  }

  .nav-user {
    border-left: none;
    padding-left: 0.25rem;
  }
}

/* ============================================================
   Log view (formatted bot log inside "Ver log" details)
   ============================================================ */
.log-view {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  max-height: 320px;
  overflow-y: auto;
}
.log-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.2rem 0.1rem;
  border-bottom: 1px dashed transparent;
}
.log-line + .log-line {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}
.log-icon {
  flex: 0 0 1.2rem;
  text-align: center;
  line-height: 1.45;
}
.log-msg {
  flex: 1 1 auto;
  word-break: break-word;
}
.log-line.log-info .log-msg {
  color: var(--text);
}
.log-line.log-success .log-msg {
  color: var(--success);
}
.log-line.log-warning {
  background: rgba(251, 191, 36, 0.05);
  border-radius: 4px;
  padding-left: 0.4rem;
  margin: 0.1rem -0.1rem;
}
.log-line.log-warning .log-msg {
  color: var(--warning);
}
.log-line.log-error {
  background: rgba(239, 68, 68, 0.05);
  border-radius: 4px;
  padding-left: 0.4rem;
  margin: 0.1rem -0.1rem;
}
.log-line.log-error .log-msg {
  color: var(--danger-soft);
}
.log-line.log-muted .log-msg {
  color: var(--muted);
}
.log-empty,
.log-error {
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  border-radius: var(--radius);
  text-align: center;
}
.log-empty {
  color: var(--muted);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.log-error {
  color: var(--danger-soft);
  background: var(--danger-bg);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* New status: tracker stopped because too close to class time.
   Use info (cyan) at low opacity — neutral, not an error, not a
   success; the bot did its job correctly. */
.status-badge.status-too_late {
  background: rgba(56, 189, 248, 0.10);
  color: var(--info);
  border-color: rgba(56, 189, 248, 0.3);
}

/* ============================================================
   Runs list — filter chips + pagination
   ============================================================ */
.runs-filters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.runs-filter-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.runs-filter-label {
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  min-width: 3rem;
}
.runs-chips {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.runs-chip {
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
.runs-chip:hover {
  background: var(--bg-elevated-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.runs-chip.is-active {
  background: var(--volt);
  color: var(--volt-ink);
  border-color: var(--volt);
  font-weight: 600;
}
.runs-chip.is-active:hover {
  background: var(--volt-hover);
  border-color: var(--volt-hover);
}
/* Per-status accent on the chip's leading edge, even when inactive,
   so the user can correlate "red chip = failed" with the matching
   status badge on the cards below. */
.runs-chip.status-chip-failed,
.runs-chip.status-chip-cancelled,
.runs-chip.status-chip-interrupted {
  border-left: 3px solid var(--danger);
}
.runs-chip.status-chip-done {
  border-left: 3px solid var(--success);
}
.runs-chip.status-chip-pending,
.runs-chip.status-chip-running {
  border-left: 3px solid var(--warning);
}
.runs-chip.status-chip-too_late {
  border-left: 3px solid var(--info);
}
.runs-summary {
  padding-top: 0.25rem;
}

/* ----- Pagination ----- */
.runs-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.runs-page-btn {
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.runs-page-btn:hover:not([disabled]) {
  background: var(--bg-elevated-2);
  border-color: var(--volt);
}
.runs-page-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.runs-page-info {
  white-space: nowrap;
}
.runs-page-info strong {
  color: var(--text);
  font-weight: 600;
}

/* Compact on mobile — chips stay horizontal but wrap, pagination
   shrinks. */
@media (max-width: 640px) {
  .runs-filter-label {
    min-width: 100%;
  }
  .runs-chip {
    font-size: 0.74rem;
    padding: 0.2rem 0.55rem;
  }
  .runs-page-btn {
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
  }
}

/* ---------- Admin inspector ("view as client") ---------- */

/* Top sticky banner — uses the existing volt accent (ccff00) so it's
   visually distinct from error/warn banners without being alarming. */
.inspect-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.5rem 0;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(135deg,
                              rgba(204, 255, 0, 0.10),
                              rgba(204, 255, 0, 0.04));
  border: 1px solid rgba(204, 255, 0, 0.35);
  border-left: 4px solid var(--volt);
  border-radius: 8px;
  color: var(--text);
}
.inspect-banner-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.inspect-banner-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.inspect-banner-body strong {
  color: var(--volt);
  font-size: 0.98rem;
}
.inspect-banner-detail {
  font-size: 0.84rem;
  color: var(--muted);
}

/* Two-column grid for the inspector's "Information" + "Subscription"
   info cards on wide screens, stacking on narrow ones. */
.inspect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 720px) {
  .inspect-grid {
    grid-template-columns: 1fr;
  }
}

/* Definition list used inside the inspector cards */
.info-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1rem;
  margin: 0;
}
.info-list dt {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.85rem;
}
.info-list dd {
  margin: 0;
  font-size: 0.92rem;
  word-break: break-word;
}

/* Breadcrumb under the banner (Admin › Clientes › email) */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.breadcrumbs a {
  color: var(--info);
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}

/* Run-count chips in the inspector summary */
.runs-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem 0;
}
.runs-summary .run-badge {
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.runs-summary .run-badge.done { background: rgba(34, 197, 94, 0.16); color: var(--success); }
.runs-summary .run-badge.failed { background: rgba(239, 68, 68, 0.16); color: var(--danger-soft); }
.runs-summary .run-badge.running { background: rgba(251, 191, 36, 0.16); color: var(--warning); }
.runs-summary .run-badge.cancelled { background: rgba(148, 163, 184, 0.16); color: var(--muted); }

.runs-inspect-wrap {
  overflow-x: auto;
  margin-bottom: 0.5rem;
}
.runs-inspect-wrap .runs-table {
  margin: 0;
}

.client-no-runs {
  text-align: center;
  padding: 1.5rem;
  color: var(--muted);
}