/* ============================================================
   HUGO KYOTO ACADEMY — Premium TikTok-style design system
   ============================================================ */

:root {
  --color-primary: #FF0050;        /* TikTok red/pink */
  --color-primary-soft: #FF2D75;
  --color-secondary: #00F2EA;      /* TikTok turquoise */
  --color-accent: #A855F7;         /* purple glow */
  --color-gold: #FBBF24;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  --bg-base: #07070C;
  --bg-surface: #0E0E16;
  --bg-elevated: #15151F;
  --bg-card: rgba(22, 22, 32, 0.6);
  --bg-hover: rgba(255, 255, 255, 0.04);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-soft: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text-primary: #F5F5F7;
  --text-secondary: #B4B4C0;
  --text-muted: #6B6B7B;
  --text-faded: #44444F;
  --text-label: #8E8E9C;    /* labels pequeños en mayúsculas — cumple AA (5.95) a 12px */

  --gradient-tiktok: linear-gradient(135deg, #FF0050 0%, #FF2D75 50%, #00F2EA 100%);
  --gradient-pink: linear-gradient(135deg, #FF0050 0%, #FF2D75 100%);
  --gradient-cyan: linear-gradient(135deg, #00F2EA 0%, #00C8C0 100%);
  --gradient-purple: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
  --gradient-gold: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  --gradient-dark: linear-gradient(180deg, #0E0E16 0%, #07070C 100%);

  --glow-primary: 0 0 32px rgba(255, 0, 80, 0.40);
  --glow-secondary: 0 0 32px rgba(0, 242, 234, 0.40);
  --glow-purple: 0 0 32px rgba(168, 85, 247, 0.40);
  --glow-gold: 0 0 32px rgba(251, 191, 36, 0.40);
  --glow-soft: 0 0 24px rgba(255, 255, 255, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.6);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --font-sans: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter', 'Segoe UI', -apple-system, sans-serif;

  --tx-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tx-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --tx-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  --sidebar-w: 260px;
}
:root {
  /* ═══════════════════════════════════════════════════════════
     DESIGN SYSTEM — Escala tipográfica formal
     Tamaños en rem sobre base 16px, con line-height por rol.
     ═══════════════════════════════════════════════════════════ */
  --fs-xs:   0.75rem;   /* 12px — metadatos, labels, captions */
  --fs-sm:   0.85rem;   /* 13.6px — texto secundario, ayudas */
  --fs-base: 0.95rem;   /* 15.2px — cuerpo por defecto */
  --fs-md:   1.05rem;   /* 16.8px — texto destacado */
  --fs-lg:   1.25rem;   /* 20px — subtítulos, h4 */
  --fs-xl:   1.5rem;    /* 24px — títulos de sección, h3 */
  --fs-2xl:  1.95rem;   /* 31px — títulos de página, h2 */
  --fs-3xl:  2.5rem;    /* 40px — hero, cifras grandes */
  --fs-4xl:  3.25rem;   /* 52px — números destacados */

  --lh-tight:   1.15;   /* títulos y cifras */
  --lh-snug:    1.35;   /* subtítulos */
  --lh-normal:  1.6;    /* cuerpo de texto */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extra:   800;

  --tracking-tight: -0.02em;   /* títulos grandes */
  --tracking-wide:  0.05em;    /* labels en mayúsculas */

  /* ═══════════════════════════════════════════════════════════
     Elevación refinada — sombras suaves y realistas (premium)
     Combinan una sombra ambiental amplia + una de contacto sutil,
     en lugar de una sola sombra dura. Dan profundidad creíble.
     ═══════════════════════════════════════════════════════════ */
  --elevation-1: 0 1px 2px rgba(0,0,0,0.24), 0 1px 3px rgba(0,0,0,0.16);
  --elevation-2: 0 2px 6px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.18);
  --elevation-3: 0 6px 16px rgba(0,0,0,0.24), 0 12px 32px rgba(0,0,0,0.28);
  --elevation-4: 0 12px 32px rgba(0,0,0,0.30), 0 24px 64px rgba(0,0,0,0.36);
  /* Realce interior sutil para bordes de superficie (efecto "vidrio") */
  --surface-highlight: inset 0 1px 0 rgba(255,255,255,0.05);

  /* Superficies con jerarquía de profundidad */
  --surface-1: rgba(22, 22, 32, 0.55);   /* card base */
  --surface-2: rgba(28, 28, 40, 0.70);   /* card elevada / hover */
  --surface-3: rgba(34, 34, 48, 0.85);   /* popover / dropdown */
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
       text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 15px;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--tx-fast); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* El outline azul por defecto del navegador aparece en :focus (p.ej. al
   hacer clic) y se veía como un borde azul al lado del botón. Lo quitamos
   en :focus y dejamos SOLO el foco de teclado (:focus-visible, ya blanco),
   que es lo correcto para accesibilidad. */
button:focus { outline: none; }
.btn:focus, .btn-icon:focus, .sidebar-link:focus, .nav-link:focus { outline: none; }
input, textarea, select { font: inherit; }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }

::selection { background: rgba(255, 0, 80, 0.3); color: white; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ============================================================
   AMBIENT BACKGROUND
   ============================================================ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(255, 0, 80, 0.15), transparent 70%),
    radial-gradient(ellipse 50% 50% at 90% 100%, rgba(0, 242, 234, 0.12), transparent 70%),
    radial-gradient(ellipse 30% 40% at 50% 50%, rgba(168, 85, 247, 0.06), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: -1;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
}

/* ============================================================
   UTILITIES
   ============================================================ */
.container { width: min(1200px, 92%); margin-inline: auto; }
.container-sm { width: min(820px, 92%); margin-inline: auto; }
.container-wide { width: min(1400px, 95%); margin-inline: auto; }

.text-gradient { background: var(--gradient-tiktok); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-gradient-cyan { background: var(--gradient-cyan); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-gradient-pink { background: var(--gradient-pink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.text-secondary { color: var(--text-secondary); }
.text-muted, .muted { color: var(--text-muted); }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.mt-sm { margin-top: 0.5rem; } .mt-md { margin-top: 1rem; } .mt-lg { margin-top: 2rem; } .mt-xl { margin-top: 3rem; }
.mb-sm { margin-bottom: 0.5rem; } .mb-md { margin-bottom: 1rem; } .mb-lg { margin-bottom: 2rem; }
.flex { display: flex; } .grid { display: grid; }
.gap-sm { gap: 0.5rem; } .gap-md { gap: 1rem; } .gap-lg { gap: 1.5rem; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .flex-col { flex-direction: column; }
.hidden { display: none !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform var(--tx-fast), box-shadow var(--tx-fast), background var(--tx-fast);
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn .icon { width: 16px; height: 16px; flex-shrink: 0; }

.btn-primary {
  /* Reposo: gradiente 100% ROSA, sin absolutamente nada de cyan, para que
     sea imposible que asome el punto azul. El efecto TikTok (cyan) se
     introduce solo en :hover con su propio gradiente. */
  background-image: linear-gradient(120deg, #FF0050 0%, #FF2D75 100%);
  color: #fff;
  box-shadow: var(--glow-primary), var(--shadow-md);
  transition: transform var(--tx-fast), box-shadow var(--tx-fast), background-image 400ms ease, background-position 400ms ease;
}
.btn-primary:hover {
  /* En hover aparece el cyan (efecto TikTok) — el mismo look que ya tenías
     y te gusta. En reposo no existe, así que no puede asomar antes. */
  background-image: linear-gradient(120deg, #FF0050 0%, #FF2D75 55%, #00F2EA 100%);
  box-shadow: 0 10px 30px rgba(255, 0, 80, 0.42), 0 0 26px rgba(0, 242, 234, 0.25);
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-soft);
  color: var(--text-primary);
  backdrop-filter: blur(12px);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-strong); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }

.btn-danger { background: var(--color-danger); color: white; }
.btn-danger:hover { background: #DC2626; }

.btn-sm { padding: 0.45rem 0.95rem; font-size: 0.82rem; }
.btn-sm .icon { width: 14px; height: 14px; }
.btn-lg { padding: 1rem 1.8rem; font-size: 1.02rem; }
.btn-block { width: 100%; }

.btn-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--tx-fast);
  position: relative;
}
.btn-icon:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ============================================================
   CARDS / GLASS
   ============================================================ */
.glass {
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.card, .widget-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: border-color var(--tx-base), transform var(--tx-base), box-shadow var(--tx-base);
  position: relative;
  overflow: hidden;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-glow:hover { box-shadow: var(--shadow-lg), 0 0 32px rgba(255, 0, 80, 0.15); }

.widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.widget-head h3 {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.widget-head h3 .icon { width: 18px; height: 18px; color: var(--color-secondary); }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 1.25rem; }
.form-group label, .form-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.form-group small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"],
input[type="search"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="color"],
select, textarea, .form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: all var(--tx-fast);
  font-size: 0.92rem;
  font-family: inherit;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(255, 0, 80, 0.12);
}
input::placeholder, textarea::placeholder { color: var(--text-faded); }
input:disabled, select:disabled, textarea:disabled { background: rgba(255,255,255,0.02); opacity: 0.6; cursor: not-allowed; }
textarea { min-height: 100px; resize: vertical; }

input[type="color"] { height: 42px; padding: 4px; cursor: pointer; }
/* Los checkbox/radio se estilizan en design-system.css (sección 17)
   con appearance:none y estética premium. Aquí solo el cursor. */
input[type="checkbox"], input[type="radio"] { cursor: pointer; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B4B4C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}
select option { background: var(--bg-elevated); color: var(--text-primary); }

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row > .form-group { flex: 1; min-width: 200px; margin-bottom: 0; }
.form-row + .form-row { margin-top: 1rem; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.badge .icon { width: 12px; height: 12px; }
.badge-primary { background: rgba(255, 0, 80, 0.12); border-color: rgba(255, 0, 80, 0.3); color: var(--color-primary); }
.badge-cyan    { background: rgba(0, 242, 234, 0.12); border-color: rgba(0, 242, 234, 0.3); color: var(--color-secondary); }
.badge-purple  { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.3); color: var(--color-accent); }
.badge-gold    { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.3); color: var(--color-gold); }
.badge-success { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.3); color: var(--color-success); }
.badge-warning { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); color: var(--color-warning); }
.badge-danger  { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.3); color: var(--color-danger); }
.badge-info    { background: rgba(0, 242, 234, 0.12); border-color: rgba(0, 242, 234, 0.3); color: var(--color-secondary); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.alert-success { border-left: 3px solid var(--color-success); background: rgba(16, 185, 129, 0.08); }
.alert-error, .alert-danger { border-left: 3px solid var(--color-danger); background: rgba(239, 68, 68, 0.08); }
.alert-warning { border-left: 3px solid var(--color-warning); background: rgba(245, 158, 11, 0.08); }
.alert-info { border-left: 3px solid var(--color-secondary); background: rgba(0, 242, 234, 0.06); }

/* ============================================================
   ICONS
   ============================================================ */
.icon { display: inline-flex; width: 18px; height: 18px; vertical-align: middle; }
.icon svg { width: 100%; height: 100%; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  /* Gradient radial centrado: en círculos pequeños se ve UNIFORME
     (con el lineal diagonal el cyan quedaba fuera del círculo). */
  background:
    radial-gradient(circle at 30% 25%, #FF2D75 0%, #FF0050 45%, #A855F7 78%, #00F2EA 130%);
  background-size: 130% 130%;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  font-size: 0.85rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  border: 2px solid var(--bg-surface);
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.avatar-sm { width: 32px; height: 32px; font-size: 0.72rem; border-width: 2px; }
.avatar-lg { width: 56px; height: 56px; font-size: 1rem; border-width: 3px; }
.avatar-xl { width: 96px; height: 96px; font-size: 1.6rem; border-width: 3px; }

/* Cuando hay foto, el background-image la pinta encima y no se ve el gradient */
.avatar-img {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent;
  text-shadow: none;
}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  margin: 0 -1.5rem;
  padding: 0 1.5rem;
}
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}
.data-table thead th {
  text-align: center;             /* por defecto centrado (todas menos la 1ª) */
  padding: 0.85rem 1rem;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.data-table thead th:first-child { text-align: left; }   /* 1ª columna: izquierda */
.data-table tbody td {
  padding: 0.95rem 1rem;
  vertical-align: middle;
  color: var(--text-secondary);
  height: 56px;                 /* altura uniforme de fila */
  box-sizing: border-box;
  text-align: center;            /* contenido centrado (todas menos la 1ª) */
}
.data-table tbody td:first-child { text-align: left; }   /* 1ª columna: izquierda */
.data-table tbody td strong { color: var(--text-primary); }
.data-table tbody tr { transition: background var(--tx-fast); }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
/* Contenido rico (icono + texto) dentro de celdas centradas: el flex
   interno se centra para que acompañe la alineación de la columna.
   La primera columna mantiene su .cell-name alineado a la izquierda. */
.data-table tbody td:not(:first-child) .cell-name,
.data-table tbody td:not(:first-child) .lesson-actions,
.data-table tbody td:not(:first-child) .row-actions,
.data-table tbody td:not(:first-child) .table-actions { justify-content: center; }
/* .cell-name usa flex pero NO debe alterar la altura de la celda:
   inline-flex + vertical-align middle mantiene la fila uniforme y las
   líneas divisorias perfectamente alineadas entre columnas. */
.cell-name {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  vertical-align: middle;
}
.cell-actions { text-align: center; vertical-align: middle; white-space: nowrap; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress {
  height: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--gradient-tiktok);
  border-radius: var(--radius-pill);
  transition: width var(--tx-slow);
}

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
}
.empty .icon { width: 48px; height: 48px; opacity: 0.4; margin: 0 auto 0.75rem; }
.empty h3 { color: var(--text-primary); margin-bottom: 0.5rem; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 0, 80, 0.4); }
  50% { box-shadow: 0 0 40px rgba(255, 0, 80, 0.7); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-fadeup { animation: fadeUp 0.6s ease-out; }
.animate-scalein { animation: scaleIn 0.4s ease-out; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   TOAST
   ============================================================ */
.toast-container {
  position: fixed; top: 1.5rem; right: 1.5rem; z-index: 10000;
  display: flex; flex-direction: column; gap: 0.75rem;
  pointer-events: none;
}
.toast {
  background: var(--bg-elevated);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  min-width: 280px; max-width: 400px;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 0.75rem;
  animation: scaleIn 0.3s ease-out;
  pointer-events: auto;
}
.toast-success { border-left: 3px solid var(--color-success); }
.toast-error { border-left: 3px solid var(--color-danger); }
.toast-info { border-left: 3px solid var(--color-secondary); }

/* ============================================================
   LOADING / SCROLLBAR
   ============================================================ */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--border-soft);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/* ============================================================
   SCROLLBARS — Neón consistente
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF0050 0%, #A855F7 50%, #00F2EA 100%);
  border-radius: 10px;
  border: 2px solid rgba(7, 7, 12, 0.6);
  box-shadow: 0 0 8px rgba(255, 0, 80, 0.3);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FF2D75 0%, #C77BFF 50%, #00F2EA 100%);
  box-shadow: 0 0 14px rgba(255, 0, 80, 0.5);
}
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-color: var(--color-primary) rgba(255,255,255,0.02); scrollbar-width: thin; }

/* ============================================================
   AUTH (login / install)
   ============================================================ */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  padding: 2.5rem 2rem;
}
.nav-brand-mark {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--gradient-tiktok);
  color: white;
  font-weight: 800;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow-primary);
}
.auth-demo {
  margin-top: 1.5rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}
.auth-demo code {
  background: rgba(255, 255, 255, 0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--color-secondary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  body { font-size: 14px; }
  .container { width: 94%; }
  .btn { padding: 0.7rem 1.2rem; }
}

/* ============================================================
   PREMIUM RESPONSIVE LAYER — Sprint UX/UI v2
   Mobile-first ajustes finales para look SaaS profesional
   ============================================================ */

/* Bloqueo de scroll cuando hay menú móvil abierto */
body.no-scroll {
  overflow: hidden;
  touch-action: none;
}

/* Backdrop del nav landing móvil */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  z-index: 998;
  transition: opacity var(--tx-base), visibility var(--tx-base);
}
.nav-backdrop.is-active { opacity: 1; visibility: visible; }

/* Foco visible accesible (a11y) — anillo neutro blanco, no cyan,
   para que ningún elemento (botones incluidos) muestre un borde
   azul a un lado antes de interactuar. Los inputs tienen su propio
   foco rosa definido aparte. */
:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.btn-icon:focus-visible {
  outline-offset: 3px;
}

/* Tamaño táctil mínimo 44x44 (Apple HIG / WCAG 2.5.5) */
@media (max-width: 768px) {
  .btn,
  .btn-icon,
  .nav-link,
  .sidebar-link,
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    min-height: 44px;
  }
  .btn-sm { min-height: 38px; }
  /* Inputs no zoom en iOS */
  input, select, textarea, button {
    font-size: 16px !important;
  }
  .form-control,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="date"],
  input[type="datetime-local"], input[type="search"], input[type="url"],
  select, textarea {
    font-size: 16px;
    padding: 0.75rem 0.9rem;
    min-height: 44px;
  }
  textarea { min-height: 88px; }
}

/* Reduce motion — respetar preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mejor scrollbar en chat/listas largas (consistente) */
.scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.scroll-y::-webkit-scrollbar { width: 6px; }
.scroll-y::-webkit-scrollbar-thumb {
  background: var(--gradient-tiktok);
  border-radius: 3px;
}

/* Container limits — todas las páginas */
.container,
.dash-content {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   POLISH LAYER — Sprint Premium Final
   Sin tocar identidad. Sin tocar colores. Solo refinar.
   ============================================================ */

/* === 1. SHADOWS premium — más sutiles y con tinte de marca === */
.shadow-tint-primary {
  box-shadow:
    0 1px 2px rgba(255, 0, 80, 0.04),
    0 12px 32px rgba(255, 0, 80, 0.08),
    0 0 1px rgba(255, 0, 80, 0.06);
}
.shadow-tint-cyan {
  box-shadow:
    0 1px 2px rgba(0, 242, 234, 0.04),
    0 12px 32px rgba(0, 242, 234, 0.08);
}

/* === 2. CARDS premium — bordes con highlight superior sutil === */
.widget-card,
.kpi,
.system-card,
.biz-card,
.phase-card,
.comm-side-card {
  position: relative;
  isolation: isolate;
}
.widget-card::before,
.kpi::before,
.biz-card::before,
.comm-side-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* === 3. BUTTONS premium — feedback más fluido === */
.btn {
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.005em;
  transition:
    background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 80ms ease-out,
    box-shadow 180ms ease-out;
}
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 600ms ease;
  pointer-events: none;
}
.btn-primary:hover::after {
  transform: translateX(100%);
}
.btn:active { transform: scale(0.97); }

/* === 4. INPUTS premium — focus rings consistentes === */
.form-control:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 3px rgba(255, 0, 80, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* === 5. LINK underline animado === */
a:not(.btn):not(.sidebar-link):not(.nav-link):not(.btn-icon) {
  position: relative;
  transition: color var(--tx-fast);
}

/* === 6. NUMBERS tabulares — alineación perfecta === */
.kpi-value,
.biz-card-num,
.system-card-value,
.results-impact-num,
.comm-stat-num,
.cc-streak-num,
.mission-hero-circle span,
.phase-dist-num,
.continue-hero-progress-circle span,
.cc-challenge-progress,
.cc-next-eta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum', 'cv11';
}

/* === 7. AVATAR cuando tiene imagen real, ring sutil === */
.avatar {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* === 8. PROGRESS bars consistencia === */
.progress, .cc-next-progress, .phase-progress-bar, .cc-challenge-bar,
.phase-dist-bar, .evolution-bar {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* === 9. SCROLLBAR custom premium === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  transition: background var(--tx-fast);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.16);
}
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; }

/* === 10. SELECTION color de marca === */
::selection {
  background: rgba(255, 0, 80, 0.3);
  color: var(--text-primary);
}

/* === 11. SKELETON loading premium (clase utilitaria) === */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 100%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === 12. NUMBERS grandes — descender corregido === */
.kpi-value, .biz-card-num, .system-card-value,
.results-impact-num, .mission-hero-circle span {
  line-height: 0.95;
  letter-spacing: -0.025em;
}

/* === 13. EYEBROWS uniformes === */
.cc-eyebrow, .cc-next-eyebrow, .cc-coach-eyebrow,
.continue-hero-eyebrow, .mission-hero-eyebrow,
.success-banner-eyebrow, .roadmap-eyebrow,
.results-hero-eyebrow, .biz-eyebrow,
.phase-eyebrow, .resources-phase-eyebrow,
.comm-side-eyebrow, .system-card-title {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* === 14. NAVIGATION sticky elegancia === */
.dash-shell { position: relative; }

/* === 15. EMPTY states más cálidos === */
.empty .icon {
  filter: drop-shadow(0 0 16px rgba(255, 0, 80, 0.2));
  opacity: 0.5;
}

/* === 16. ALERT premium con left-accent === */
.alert {
  border-left: 3px solid currentColor;
  position: relative;
  padding-left: 1.25rem;
}
.alert::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.04;
  pointer-events: none;
  border-radius: inherit;
}

/* === 17. FOCUS-VISIBLE elevado ===
   Foco discreto y coherente con la identidad. Se usa un anillo
   blanco translúcido (neutro) en lugar de cyan, para que no
   parezca un borde de color fuera de sitio antes del hover.
   Solo aparece con navegación por teclado (:focus-visible). */
.btn:focus-visible,
.sidebar-link:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
  box-shadow: none;
}

/* === 18. ANIMATION ease curve unificado === */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Escala de espaciados única (design system) ──────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Escala de z-index única (evita conflictos de capas) ──── */
  /* Jerarquía real de la plataforma, de menor a mayor: */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-emoji-picker: 300;
  --z-nav: 1000;
  --z-post-modal: 9100;
  --z-plans-modal: 9200;
  --z-admin-modal: 9300;
  --z-onboard-modal: 9500;
  --z-lightbox: 9999;
  --z-toast: 10000;          /* siempre por encima de todo: feedback visible */

  /* ── Altura de control única (botones, inputs, selects) ───── */
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;
}

/* === 19. LOADING button states === */
.btn.is-loading {
  pointer-events: none;
  position: relative;
  color: transparent;
}
.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 600ms linear infinite;
  color: var(--text-primary);
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* === 20. CONTENT TYPOGRAPHY refinement === */
h1, h2, h3 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.022em;
}
h1 { letter-spacing: -0.028em; }

p {
  text-rendering: optimizeLegibility;
}

/* === 21. SIDEBAR group title — más premium === */
.sidebar-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sidebar-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-subtle), transparent);
}

/* === 22. CARDS hover lift sutil === */
.widget-card, .kpi, .biz-card, .system-card, .reco-card {
  transition: transform 240ms var(--ease-out-expo), border-color 240ms var(--ease-out-expo);
}
.kpi:hover, .biz-card:hover, .system-card:hover {
  transform: translateY(-1px);
}