/* ════════════════════════════════════════════════════════
   INGLÉS 360 UI KIT — COMPONENTS
   All component classes use the `.i360uk-*` prefix so they
   never collide with Theme v5's own `.i360-*` primitives.
   Visual recipes are lifted from Theme v5; see
   THEME-V5-AUDIT.md for the mapping.
   ════════════════════════════════════════════════════════ */

/* ── App shell helpers ────────────────────────────── */

.i360uk-app-shell {
  background-color: var(--i360-bg);
  background-image:
    radial-gradient(54vw 44vh at 6%  10%, rgba(255,116,184,.22), transparent 62%),
    radial-gradient(56vw 48vh at 84% 12%, rgba(139,92,246,.26),  transparent 60%),
    radial-gradient(48vw 42vh at 80% 78%, rgba(73,210,255,.18),  transparent 60%),
    linear-gradient(180deg,#05060D,#0B0D1A 60%,#060711);
  color: var(--i360-text);
  font-family: var(--i360-font-body);
  font-size: var(--i360-fs-base);
  line-height: 1.7;
  min-height: 100%;
}
[data-theme="light"] .i360uk-app-shell {
  background-color: #FFFFFF;
  background-image:
    radial-gradient(54vw 44vh at 6%  10%, rgba(255,116,184,.09), transparent 62%),
    radial-gradient(56vw 48vh at 84% 12%, rgba(139,92,246,.11),  transparent 60%),
    radial-gradient(48vw 42vh at 80% 80%, rgba(26,127,160,.07),  transparent 60%),
    linear-gradient(180deg,#FFFFFF,#F4F7FF 64%,#EEF2FF);
  color: var(--i360-text);
}

.i360uk-container {
  max-width: var(--i360-wide);
  margin-inline: auto;
  padding-inline: var(--i360-pad);
}

.i360uk-content {
  max-width: var(--i360-content);
  margin-inline: auto;
  padding-inline: var(--i360-pad);
}

.i360uk-section {
  padding-block: clamp(40px, 6vw, 72px);
}

.i360uk-stack   { display: flex; flex-direction: column; gap: var(--i360-space-4); }
.i360uk-stack-3 { display: flex; flex-direction: column; gap: var(--i360-space-3); }
.i360uk-row     { display: flex; flex-wrap: wrap; gap: var(--i360-space-3); align-items: center; }

.i360uk-card-grid {
  display: grid;
  gap: var(--i360-space-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ── Eyebrow / lead / gradient text ──────────────── */

.i360uk-eyebrow {
  font-family: var(--i360-font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--i360-muted);
  margin: 0 0 12px;
  display: block;
}

.i360uk-lead {
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.72;
  color: var(--i360-muted);
  max-width: 800px;
}

.i360uk-grad {
  background: var(--i360-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Card base ───────────────────────────────────── */

.i360uk-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)),
    radial-gradient(500px 140px at 0% 0%,   rgba(255,116,184,.08), transparent 60%),
    radial-gradient(500px 140px at 100% 0%, rgba(73,210,255,.06),  transparent 60%);
  border: 1px solid var(--i360-border);
  border-radius: var(--i360-card-r);
  padding: 22px;
  box-shadow: var(--i360-shadow-md);
  color: var(--i360-text);
  transition: box-shadow var(--i360-t), border-color var(--i360-t), transform var(--i360-t);
}
.i360uk-card:hover {
  box-shadow: var(--i360-shadow-lg);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-2px);
}

[data-theme="light"] .i360uk-card {
  background: rgba(255,255,255,.92);
  border-color: rgba(22,24,42,.12);
  box-shadow: 0 2px 16px rgba(22,24,42,.08);
}
[data-theme="light"] .i360uk-card:hover {
  box-shadow: 0 8px 28px rgba(22,24,42,.14);
  border-color: rgba(22,24,42,.20);
}

.i360uk-card--accent {
  background: var(--i360-grad-45);
  border-color: transparent;
  color: #07101E;
}
.i360uk-card--accent :is(h1,h2,h3,h4,h5,h6,p,span,strong) {
  color: #07101E;
  -webkit-text-fill-color: #07101E;
}

.i360uk-card--glow {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)) padding-box,
    var(--i360-grad) border-box;
}

.i360uk-card__eyebrow { /* same tokens as .i360uk-eyebrow but local spacing */
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--i360-muted);
  margin: 0 0 10px;
  display: block;
}
.i360uk-card__title {
  font-family: var(--i360-font-display);
  font-size: var(--i360-fs-xl);
  font-weight: 800;
  line-height: 1.14;
  margin: 0 0 8px;
  color: var(--i360-text);
}
.i360uk-card__body {
  color: var(--i360-muted);
  margin: 0 0 var(--i360-space-3);
}
.i360uk-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--i360-space-2);
  align-items: center;
  margin-top: var(--i360-space-3);
}

/* ── Buttons ─────────────────────────────────────── */

.i360uk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--i360-font-display);
  font-weight: 800;
  font-size: var(--i360-fs-sm);
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--i360-btn-r);
  border: 1px solid transparent;
  background: transparent;
  color: var(--i360-text);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--i360-t), transform var(--i360-t), background var(--i360-t), border-color var(--i360-t);
  white-space: nowrap;
}
.i360uk-btn:focus-visible {
  outline: none;
  box-shadow: var(--i360-focus);
}
.i360uk-btn[disabled],
.i360uk-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.i360uk-btn--primary {
  background: var(--i360-grad-btn);
  color: #FFFFFF;
  border-color: transparent;
  padding: 14px 26px;
  box-shadow: var(--i360-shadow-btn);
}
.i360uk-btn--primary:hover:not([disabled]) {
  box-shadow: var(--i360-shadow-btn-hv);
  transform: translateY(-1px);
  color: #FFFFFF;
}

.i360uk-btn--secondary {
  background: rgba(255,255,255,.06);
  color: var(--i360-text);
  border-color: var(--i360-border);
  font-weight: 700;
  padding: 13px 24px;
}
.i360uk-btn--secondary:hover:not([disabled]) {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.26);
}
[data-theme="light"] .i360uk-btn--secondary {
  background: rgba(22,24,42,.05);
  color: var(--i360-text);
  border-color: rgba(22,24,42,.15);
}
[data-theme="light"] .i360uk-btn--secondary:hover:not([disabled]) {
  background: rgba(22,24,42,.09);
}

.i360uk-btn--sm { padding: 9px 16px; font-size: var(--i360-fs-xs); }

/* ── Badges (route / cycle / zone) ──────────────── */

.i360uk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--i360-font-display);
  font-weight: 700;
  font-size: var(--i360-fs-xs);
  letter-spacing: .02em;
  padding: 6px 12px;
  border-radius: var(--i360-pill);
  border: 1px solid var(--i360-border);
  background: rgba(255,255,255,.06);
  color: var(--i360-text);
  line-height: 1;
  white-space: nowrap;
}
.i360uk-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .75;
}

/* Route variants use the three brand colors to stay visually distinct. */
.i360uk-badge--route.is-support  { color: var(--i360-pink);   background: rgba(255,116,184,.10); border-color: rgba(255,116,184,.24); }
.i360uk-badge--route.is-balanced { color: var(--i360-violet); background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.26); }
.i360uk-badge--route.is-exposure { color: var(--i360-blue);   background: rgba(73,210,255,.10); border-color: rgba(73,210,255,.24); }

/* Cycle and zone — blue-family + violet accents, following Theme v5 plugin patterns. */
.i360uk-badge--cycle.is-immersion     { color: var(--i360-blue);   background: rgba(73,210,255,.10); border-color: rgba(73,210,255,.24); }
.i360uk-badge--cycle.is-activation    { color: var(--i360-violet); background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.26); }
.i360uk-badge--cycle.is-socialization { color: var(--i360-pink);   background: rgba(255,116,184,.10); border-color: rgba(255,116,184,.24); }

.i360uk-badge--zone.is-imitation      { color: var(--i360-blue);   background: rgba(73,210,255,.10); border-color: rgba(73,210,255,.24); }
.i360uk-badge--zone.is-active_voice   { color: var(--i360-violet); background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.26); }
.i360uk-badge--zone.is-conversational { color: var(--i360-pink);   background: rgba(255,116,184,.10); border-color: rgba(255,116,184,.24); }

/* ── Progress bar ────────────────────────────────── */

.i360uk-progress {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,.12);
  border-radius: var(--i360-pill);
  overflow: hidden;
}
[data-theme="light"] .i360uk-progress {
  background: rgba(22,24,42,.10);
}
.i360uk-progress__bar {
  height: 100%;
  background: var(--i360-grad-btn);
  border-radius: var(--i360-pill);
  transition: width var(--i360-t);
}
.i360uk-progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--i360-fs-xs);
  color: var(--i360-muted);
  margin-top: 6px;
}

/* ── Mission card ────────────────────────────────── */

.i360uk-mission-card { /* inherits .i360uk-card */ }
.i360uk-mission-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--i360-space-3);
  margin-bottom: var(--i360-space-3);
}
.i360uk-mission-card__xp {
  font-family: var(--i360-font-display);
  font-weight: 800;
  font-size: var(--i360-fs-sm);
  color: var(--i360-warning);
  background: rgba(255,209,102,.12);
  padding: 6px 10px;
  border-radius: var(--i360-pill);
  white-space: nowrap;
}
.i360uk-mission-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--i360-space-3);
}

/* ── Intake step card ────────────────────────────── */

.i360uk-intake-card { /* inherits .i360uk-card */ }
.i360uk-intake-card__stepmeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--i360-space-2);
  margin-bottom: var(--i360-space-3);
}
.i360uk-intake-card__question {
  font-family: var(--i360-font-display);
  font-size: var(--i360-fs-xl);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 var(--i360-space-3);
  color: var(--i360-text);
}
.i360uk-intake-card__body {
  color: var(--i360-muted);
  margin: 0 0 var(--i360-space-4);
}
.i360uk-intake-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--i360-space-3);
  margin-top: var(--i360-space-4);
  flex-wrap: wrap;
}

/* ── Profile summary card ────────────────────────── */

.i360uk-profile-summary { /* inherits .i360uk-card */ }
.i360uk-profile-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--i360-space-3);
  margin-bottom: var(--i360-space-3);
}
.i360uk-profile-summary__level {
  font-family: var(--i360-font-display);
  font-weight: 900;
  font-size: var(--i360-fs-2xl);
  line-height: 1;
  background: var(--i360-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.i360uk-profile-summary__xp {
  font-family: var(--i360-font-body);
  color: var(--i360-muted);
  font-size: var(--i360-fs-sm);
}
.i360uk-profile-summary__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--i360-space-3);
}

/* ── Practice record card ────────────────────────── */

.i360uk-practice-card {
  background: var(--i360-surface-2);
  border: 1px solid var(--i360-border);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--i360-text);
  transition: border-color var(--i360-t);
}
.i360uk-practice-card:hover { border-color: rgba(255,255,255,.22); }
[data-theme="light"] .i360uk-practice-card:hover { border-color: rgba(22,24,42,.18); }
.i360uk-practice-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--i360-space-2);
}
.i360uk-practice-card__kind {
  font-family: var(--i360-font-display);
  font-weight: 700;
  font-size: var(--i360-fs-sm);
  color: var(--i360-text);
}
.i360uk-practice-card__time {
  font-size: var(--i360-fs-xs);
  color: var(--i360-muted);
}
.i360uk-practice-card__body {
  color: var(--i360-muted);
  font-size: var(--i360-fs-sm);
  margin: 0;
}

/* ── Empty state ─────────────────────────────────── */

.i360uk-empty {
  background: var(--i360-surface);
  border: 1px dashed var(--i360-border);
  border-radius: var(--i360-card-r);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  color: var(--i360-muted);
}
.i360uk-empty__title {
  font-family: var(--i360-font-display);
  font-size: var(--i360-fs-lg);
  font-weight: 800;
  color: var(--i360-text);
  margin: 0 0 8px;
}
.i360uk-empty__body { margin: 0 0 var(--i360-space-3); }

/* ── Notice / alert ──────────────────────────────── */

.i360uk-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--i360-border);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--i360-surface);
  color: var(--i360-text);
  font-size: var(--i360-fs-sm);
  line-height: 1.55;
}
.i360uk-notice__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-top: 3px;
}
.i360uk-notice__title {
  font-family: var(--i360-font-display);
  font-weight: 800;
  margin: 0 0 2px;
  color: var(--i360-text);
}
.i360uk-notice__body { margin: 0; color: var(--i360-muted); }

.i360uk-notice--info    { border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.08); }
.i360uk-notice--info    .i360uk-notice__icon { background: var(--i360-violet); }

.i360uk-notice--success { border-color: rgba(78,205,196,.38); background: rgba(78,205,196,.09); }
.i360uk-notice--success .i360uk-notice__icon { background: var(--i360-success); }

.i360uk-notice--warning { border-color: rgba(255,209,102,.42); background: rgba(255,209,102,.10); }
.i360uk-notice--warning .i360uk-notice__icon { background: var(--i360-warning); }

.i360uk-notice--danger  { border-color: rgba(255,107,138,.42); background: rgba(255,107,138,.09); }
.i360uk-notice--danger  .i360uk-notice__icon { background: var(--i360-danger); }

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 768px) {
  .i360uk-card { padding: 18px; }
  .i360uk-intake-card__question { font-size: var(--i360-fs-lg); }
  .i360uk-row,
  .i360uk-intake-card__footer,
  .i360uk-mission-card__head { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .i360uk-card-grid { grid-template-columns: 1fr; }
  .i360uk-intake-card__footer { flex-direction: column; align-items: stretch; }
  .i360uk-intake-card__footer .i360uk-btn { width: 100%; }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    transition-duration: .01ms !important;
    transition-delay: 0 !important;
  }
  .i360uk-card:hover,
  .i360uk-btn--primary:hover:not([disabled]) { transform: none; }
}


/* v1.0.1 — Inglés 360 visual alignment hotfix: no pink primary gradient, liquid buttons/cards. */
:root {
  --i360-pink: #8B5CF6 !important;
  --i360-violet: #8B5CF6 !important;
  --i360-blue: #49D2FF !important;
  --i360-cyan: #2BE6E0 !important;
  --i360-grad: linear-gradient(90deg,#2BE6E0,#4A6BFF,#8B5CF6) !important;
  --i360-grad-45: linear-gradient(135deg,#2BE6E0,#4A6BFF,#8B5CF6) !important;
  --i360-grad-btn: linear-gradient(90deg,#2BE6E0,#4A6BFF,#8B5CF6) !important;
  --i360-btn-r: 999px !important;
  --i360-card-r: 28px !important;
}
.i360uk-app-shell {
  background-image:
    radial-gradient(62vw 48vh at 82% 10%, rgba(139,92,246,.18), transparent 62%),
    radial-gradient(56vw 42vh at 16% 16%, rgba(43,230,224,.12), transparent 65%),
    linear-gradient(180deg,#302676 0%,#111846 56%,#080D2B) !important;
}
[data-theme="light"] .i360uk-app-shell {
  background-image:
    radial-gradient(62vw 48vh at 82% 10%, rgba(139,92,246,.10), transparent 62%),
    radial-gradient(56vw 42vh at 16% 16%, rgba(43,230,224,.07), transparent 65%),
    linear-gradient(180deg,#FFFFFF 0%,#FAFBFF 56%,#EEF2FF) !important;
}
.i360uk-btn {
  border-radius: 999px !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.i360uk-btn::before {
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.18) 42%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform:translateX(-60%);
  transition:transform .55s cubic-bezier(.16,.84,.3,1), opacity .2s ease;
  opacity:.72;
  z-index:-1;
}
.i360uk-btn:hover::before { transform:translateX(40%); opacity:1; }
.i360uk-btn:active { transform:scale(.975) !important; }
.i360uk-btn--primary {
  background:var(--i360-grad-btn) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  box-shadow:0 14px 34px rgba(74,107,255,.30),0 0 26px rgba(43,230,224,.12) !important;
}
.i360uk-btn--secondary {
  border-radius:999px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06)) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  backdrop-filter:blur(18px) saturate(165%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(165%) !important;
}
[data-theme="light"] .i360uk-btn--secondary {
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.62)) !important;
  color:#101735 !important;
  -webkit-text-fill-color:#101735 !important;
  border-color:rgba(18,24,52,.18) !important;
}
.i360uk-card {
  border-radius:28px !important;
}
.i360uk-card--accent {
  background:var(--i360-grad-45) !important;
  color:#FFFFFF !important;
}
.i360uk-card--accent :is(h1,h2,h3,h4,h5,h6,p,span,strong) {
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}
.i360uk-badge--route.is-support,
.i360uk-badge--cycle.is-socialization,
.i360uk-badge--zone.is-conversational {
  color:var(--i360-violet) !important;
  background:rgba(139,92,246,.10) !important;
  border-color:rgba(139,92,246,.26) !important;
}