/* ═══════════════════════════════════════════════════════════════
   AsistPro Field Pro · /pro/ · LIGHT MINIMALISTA VIOLET
   Override sobre _field.css inspirado en Lighter (Themeforest 7iquid).
   No toca /skills/ ni /. Solo aplica con <link> dentro de /pro/.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Theme switch · light (off-white cálido inspirado en inacep.io) ── */
  --bg-deep:        #FAFAF8;          /* off-white cálido (inacep) */
  --bg-elevated:    #FFFFFF;          /* surface card */
  --bg-muted:       #F5F1E9;          /* warm muted */
  --bg-overlay:     rgba(9,9,11,0.55);

  --border:         #E5E2DC;          /* warm light border (inacep --line) */
  --border-strong:  #38BDF8;          /* accent border focus */
  --border-soft:    #F0EDE6;

  --text:           #09090B;          /* near-black saturated */
  --text-dim:       #52525B;          /* muted */
  --text-faint:     #71717A;
  --text-mute:      #A1A1AA;

  /* ── Accent · AZUL ASISTPRO (brand favicon · corporativo brillante) ── */
  /* nombres "violet" mantenidos como alias para no romper selectores */
  --violet:         #0240C0;          /* AsistPro brand blue (top favicon) */
  --violet-soft:    #1A56D8;          /* highlight luminoso */
  --violet-deep:    #012E8A;          /* deep (bottom favicon) */
  --violet-glow:    rgba(2,64,192,0.36);
  --violet-bg:      rgba(2,64,192,0.06);
  --violet-watermark: #E8EEFA;        /* big numbers fade · tint azul */

  /* accent secundario · naranja del check del favicon */
  --orange-check:   #EE5904;
  --orange-check-bg:rgba(238,89,4,0.10);

  /* aliases para selectores de _field.css */
  --orange:         var(--violet);
  --orange-soft:    var(--violet-soft);
  --orange-deep:    var(--violet-deep);
  --orange-glow:    var(--violet-glow);
  --orange-bg:      var(--violet-bg);

  --mint:           var(--violet);
  --mint-soft:      var(--violet-soft);
  --mint-deep:      var(--violet-deep);

  --blue:           #1A56D8;
  --blue-deep:      #0240C0;

  --glass:          rgba(2,64,192,0.04);
  --glass-strong:   rgba(2,64,192,0.10);
  --glass-stroke:   #C9D6F2;

  /* estados refrescados sobre light */
  --positive:       #16A34A;
  --positive-bg:    rgba(22,163,74,0.08);
  --warning:        #D97706;
  --warning-bg:     rgba(217,119,6,0.08);
  --negative:       #DC2626;
  --negative-bg:    rgba(220,38,38,0.08);
  --info:           #2563EB;
  --info-bg:        rgba(37,99,235,0.08);
  --yellow:         #D4A017;

  /* radii Lighter style */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 24px;

  /* sombras suaves */
  --sh-sm: 0 1px 2px rgba(9,9,11,0.04);
  --sh-md: 0 4px 16px rgba(9,9,11,0.06);
  --sh-lg: 0 12px 40px rgba(9,9,11,0.08);
  --sh-violet: 0 8px 28px rgba(2,64,192,0.30);   /* AsistPro blue glow */
}

/* ── Body + tipografía ──────────────────────────────────────────── */
body {
  background: var(--bg-deep) !important;
  color: var(--text) !important;
  font-family: 'Satoshi', 'Inter', 'Funnel Sans', system-ui, sans-serif;
  letter-spacing: -0.32px;
}

/* fuentes Satoshi · CDN gratuito */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&f[]=cabinet-grotesk@500,700,800&display=swap');

.app, .field-main {
  background: var(--bg-deep) !important;
}

/* ── Background · copia exacta del fondo de inacep.io ──────────────
   12 columnas verticales casi invisibles + base cálida off-white.
   Se inyecta como ::before del body con max-width 1440px centrado.
   ───────────────────────────────────────────────────────────────── */
body {
  background: #FAFAF8 !important;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(2,64,192,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,64,192,0.06) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT · todo centrado max-width 1280px (Lighter style)
   Grid: betastrip / topbar / subbar / [sidebar | main] / footer
   ═══════════════════════════════════════════════════════════════ */
.app {
  background: transparent !important;
  position: relative;
  z-index: 1;
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  grid-template-rows: auto auto auto 1fr auto !important;
  grid-template-areas:
    "topstrip  topstrip"
    "header    header"
    "subbar    subbar"
    "side      main"
    "side      footer" !important;
  gap: 0 28px !important;
  align-items: start !important;
}
.field-betastrip { grid-area: topstrip !important; }
.field-top       { grid-area: header   !important; }
.field-subbar    { grid-area: subbar   !important; }
.field-side      {
  grid-area: side !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  align-self: start;
  position: sticky;
  top: 24px;
  width: 100% !important;
  max-width: none !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-md) !important;
  padding: 20px 16px !important;
}
.field-main      { grid-area: main !important; min-width: 0; }
.field-foot      { grid-area: footer !important; min-width: 0; }

.field-main {
  background: transparent !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 0 48px !important;
  width: 100% !important;
}

/* Beta strip · pill auto-width, no full bleed */
.field-betastrip {
  border-radius: var(--r-pill) !important;
  margin: 16px 0 12px !important;
  padding: 8px 18px !important;
  width: auto !important;
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
  align-self: start;
  justify-self: start;
}

@media (max-width: 991px) {
  .app {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "topstrip"
      "header"
      "subbar"
      "main"
      "footer" !important;
  }
  .field-side:not(.fm-drawer-open) { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR estilo Lighter
   - Layout 3-zonas: brand-left | nav-pill-center | cta-right
   - Sin background sólido (transparente sobre body)
   ═══════════════════════════════════════════════════════════════ */
header.field-top {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow:
    0 24px 48px -16px rgba(2,64,192,0.30),
    0 8px 18px -6px rgba(2,64,192,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  border-radius: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 14px 18px !important;
  margin: 8px 0 0 !important;
  width: 100% !important;
  grid-area: header !important;
  position: relative !important;
}

/* Brand · logo blanco directo sobre topbar azul (sin pill) */
.field-top .brand {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 12px !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: opacity 200ms ease;
}
.field-top .brand:hover { opacity: 0.85; }
.field-top .brand-logo {
  display: block !important;
  height: 28px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  filter: none !important;
  background: transparent !important;
}
/* Por si quedan refs viejos al wordmark/mark */
.field-top .brand-mark,
.field-top .brand-wordmark { display: none !important; }

/* Brand-title (usado en tools, no en /pro/) · blanco sobre pill azul */
.field-top .brand-title {
  border-left: 1px solid rgba(255,255,255,0.18) !important;
  padding-left: 18px !important;
  margin-left: 14px !important;
  height: auto !important;
}
.field-top .brand-title .label {
  color: rgba(255,255,255,0.65) !important;
  font-family: 'Geist Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.field-top .brand-title .name {
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin-top: 2px !important;
}

/* Top-capsule (clock widget tool pages) · vidrio blanco translúcido sobre pill azul */
.field-top .top-capsule {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.field-top .top-capsule .info .lbl {
  color: rgba(255,255,255,0.62) !important;
}
.field-top .top-capsule .info .val {
  color: #FFFFFF !important;
}
.field-top .top-capsule .info .sub {
  color: rgba(255,255,255,0.78) !important;
}
.field-top .top-capsule .clock-time {
  color: #FFFFFF !important;
}

/* h-spacer para tools que separan brand de top-capsule */
.field-top .h-spacer { flex: 1 !important; }

/* NAV PILL central · pill flotante neumorphic estilo Lighter */
.nav-pill {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  background: #FFFFFF !important;
  border-radius: 999px !important;
  padding: 10px 12px 10px 28px !important;
  border: none !important;
  margin-left: auto !important;
  box-shadow:
    0 24px 48px -18px rgba(9,9,11,0.18),
    0 8px 18px -4px rgba(9,9,11,0.06),
    0 2px 4px rgba(9,9,11,0.04),
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -2px 4px rgba(9,9,11,0.03),
    inset 0 0 0 1px rgba(229,226,220,0.55);
}
.nav-pill-link {
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.2px;
  padding: 6px 14px;
  border-radius: 999px;
  transition: color 220ms ease, background-color 220ms ease, transform 220ms cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
  position: relative;
  display: inline-block;
}
.nav-pill-link::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--violet-deep));
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 260ms cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.nav-pill-link:hover {
  color: var(--violet);
  background: rgba(2,64,192,0.06);
  transform: translateY(-1px);
}
.nav-pill-link:hover::before {
  width: 60%;
}
.nav-pill-link:active {
  transform: translateY(0);
  transition-duration: 80ms;
}
.nav-pill-link.active {
  color: var(--violet);
  background: rgba(2,64,192,0.08);
}
.nav-pill-link.active::before {
  width: 60%;
}
.nav-pill-link.active::after {
  display: none !important;
}

/* Separador vertical antes del CTA */
.nav-pill-divider {
  width: 1px;
  height: 22px;
  background: rgba(9,9,11,0.12);
  display: inline-block;
}

/* CTA integrado al final del nav-pill · pill azul AsistPro */
.nav-pill-link.nav-pill-cta {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%) !important;
  color: #FFFFFF !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  box-shadow:
    0 4px 12px -4px rgba(2,64,192,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 220ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms ease, filter 220ms ease;
}
.nav-pill-link.nav-pill-cta::before {
  display: none !important;
}
.nav-pill-link.nav-pill-cta:hover {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%) !important;
  color: #FFFFFF !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px -4px rgba(2,64,192,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
}

/* ════════ NAV MEGAMENU ════════ */

/* Fix betastrip — especificidad alta para ganar a light-shell */
body .field-betastrip {
  background: linear-gradient(135deg, #1A56D8 0%, #012E8A 100%) !important;
  color: #FFFFFF !important;
}
body .field-betastrip strong,
body .field-betastrip em { color: rgba(255,255,255,0.90) !important; font-weight: 700 !important; }
body .field-betastrip-tag {
  background: rgba(255,255,255,0.95) !important;
  color: #012E8A !important;
}

/* Dropdown trigger button — mismo look que nav-pill-link */
.nav-pill-drop {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-pill-drop .caret {
  font-size: 9px;
  opacity: 0.7;
  transition: transform 0.18s ease;
  display: inline-block;
}
.nav-pill-drop.active-drop .caret { transform: rotate(180deg); }
.nav-pill-drop.active-drop { color: #FFFFFF !important; }

/* Shared backdrop */
#nav-mega-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6,16,38,0.48);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 899;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
#nav-mega-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── Herramientas mega panel */
#nav-mega {
  position: fixed;
  left: 50%;
  width: min(920px, calc(100vw - 32px));
  /* Cap altura para que scrollee cuando hay 9 herramientas en mobile (1 columna) */
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: #FFFFFF;
  border: 2px solid rgba(2,64,192,0.18);
  border-radius: 22px;
  box-shadow: 0 28px 64px -8px rgba(2,64,192,0.22), 0 8px 24px rgba(0,0,0,0.12);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 220ms ease, transform 220ms ease;
}
#nav-mega.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Header banner del megamenu */
.nm-banner {
  background: linear-gradient(135deg, #0240C0 0%, #012E8A 100%);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nm-banner-title {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Geist Mono', ui-monospace, monospace;
}
.nm-banner-sub { color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 2px; }
.nm-tool-count {
  background: rgba(255,255,255,0.15);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.25);
}

.nm-inner { padding: 20px 24px 24px; }
.nm-cats { display: flex; gap: 0; }
.nm-cat {
  flex: 1;
  padding: 0 20px;
  border-right: 1px solid rgba(0,0,0,0.06);
}
.nm-cat:first-child { flex: 1.4; padding-left: 0; }
.nm-cat:last-child  { padding-right: 0; border-right: none; }

.nm-cat-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-family: 'Geist Mono', ui-monospace, monospace;
}
.nm-cat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nm-items { display: flex; flex-direction: column; gap: 4px; }

/* Tool card */
.nm-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  border: 1.5px solid transparent;
  transition: all 0.14s ease;
  position: relative;
}
.nm-card:hover {
  background: var(--cat-bg, rgba(2,64,192,0.06));
  border-color: var(--cat-color, #0240C0);
  transform: translateX(2px);
}
.nm-card.cur {
  background: var(--cat-bg, rgba(2,64,192,0.08));
  border-color: var(--cat-color, #0240C0);
}
.nm-card-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nm-card-ic svg { width: 18px; height: 18px; }
.nm-card-body { flex: 1; min-width: 0; }
.nm-card-body strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #09090B;
  line-height: 1.25;
  margin-bottom: 3px;
}
.nm-card-body span {
  font-size: 11px;
  color: #71717A;
  line-height: 1.45;
  display: block;
}
.nm-card-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ── Suscripción panel — 3 planes en cards */
#nav-sub-panel {
  position: fixed;
  width: 680px;
  max-width: calc(100vw - 24px);
  /* Cap a viewport height para que el panel scrollee cuando el contenido excede el alto.
     Sin esto, en mobile (cards verticales) el contenido se cortaba abajo del viewport. */
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  background: #FFFFFF;
  border: 2px solid rgba(2,64,192,0.18);
  border-radius: 22px;
  box-shadow: 0 28px 64px -8px rgba(2,64,192,0.22), 0 8px 24px rgba(0,0,0,0.12);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 220ms ease, transform 220ms ease;
}
#nav-sub-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nsp-inner { padding: 20px 22px 22px; }
.nsp-hd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.nsp-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0240C0;
  font-family: 'Geist Mono', ui-monospace, monospace;
}
.nsp-status-row { display: flex; align-items: center; gap: 6px; }
.nsp-dot { width: 8px; height: 8px; border-radius: 50%; background: #A1A1AA; flex-shrink: 0; }
.nsp-dot.active { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.nsp-status-txt { font-size: 12px; color: #16A34A; font-weight: 600; }

.nsp-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.nsp-plan-card {
  position: relative;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.18s ease;
  background: #FAFAFA;
}
.nsp-plan-card:hover { border-color: var(--plan-color); background: #FFFFFF; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.nsp-plan-card.current {
  border-color: var(--plan-color);
  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.nsp-current-tag {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--plan-color);
  color: #FFFFFF;
  white-space: nowrap;
}
.nsp-plan-hd { display: flex; flex-direction: column; gap: 4px; }
.nsp-plan-hd strong { font-size: 14px; font-weight: 700; color: #09090B; }
.nsp-plan-price { display: flex; align-items: baseline; gap: 4px; }
.nsp-price-val { font-size: 20px; font-weight: 800; color: var(--plan-color); }
.nsp-price-sub { font-size: 11px; color: #71717A; }
.nsp-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.nsp-features li {
  font-size: 11px;
  color: #52525B;
  padding-left: 14px;
  position: relative;
  line-height: 1.4;
}
.nsp-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--plan-color);
  font-weight: 700;
  font-size: 10px;
}
.nsp-plan-btn {
  display: block;
  text-align: center;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  color: #FFFFFF;
  transition: all 0.15s ease;
  margin-top: 4px;
}
.nsp-plan-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.20); }

/* Mobile responsive */
@media (max-width: 768px) {
  #nav-mega { width: calc(100vw - 16px); border-radius: 18px; }
  .nm-banner { padding: 12px 16px; }
  .nm-inner { padding: 14px 16px 18px; }
  .nm-cats { flex-direction: column; gap: 16px; }
  .nm-cat { padding: 0; border-right: none; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .nm-cat:last-child { border-bottom: none; padding-bottom: 0; }
  .nm-cat:first-child { flex: 1; }
  .nm-items { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .nm-card { width: calc(50% - 3px); }
  #nav-sub-panel { width: calc(100vw - 24px); right: 12px !important; left: auto !important; }
  .nsp-plans { grid-template-columns: 1fr; gap: 10px; }
}

/* Botón salir circular · extremo derecho del field-top */
.field-top-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: #0A1740;
  border: 1px solid rgba(255,255,255,0.85);
  transition: all 0.18s ease;
  flex-shrink: 0;
  margin-left: 12px;
  box-shadow: 0 4px 12px -4px rgba(10,23,64,0.20);
  text-decoration: none;
}
.field-top-logout:hover {
  background: #F77A1E;
  color: #FFFFFF;
  border-color: #F77A1E;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -4px rgba(247,122,30,0.45);
}
.field-top-logout svg { display: block; }
@media (max-width: 720px) {
  .field-top-logout { width: 36px; height: 36px; margin-left: 8px; }
  .field-top-logout svg { width: 16px; height: 16px; }
}

/* CTA pill negro derecha · alto matchea pill central */
.header-cta {
  background: var(--text) !important;
  color: #FFFFFF !important;
  padding: 18px 32px !important;
  border-radius: 999px !important;
  font-family: 'Satoshi', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  letter-spacing: -0.2px;
  box-shadow:
    0 20px 36px -14px rgba(9,9,11,0.40),
    0 6px 14px -3px rgba(9,9,11,0.20),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform 220ms ease, box-shadow 220ms ease !important;
  flex-shrink: 0;
  white-space: nowrap;
}
.header-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 32px 56px -16px rgba(9,9,11,0.50),
    0 12px 20px -4px rgba(9,9,11,0.24),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Tablet · scope EXACTO 992-1199px para que NO pise el rule de 991px abajo */
@media (min-width: 992px) and (max-width: 1199px) {
  .nav-pill { padding: 16px 32px !important; gap: 28px !important; }
  .nav-pill-link { font-size: 14px; }
  .header-cta { padding: 16px 26px !important; font-size: 13px !important; }
  .field-top .brand-logo { height: 24px !important; max-width: 170px !important; }
  .app { grid-template-columns: 240px 1fr !important; }
}
@media (max-width: 991px) {
  /* En mobile el hamburger abre la sidebar como drawer → ocultamos el nav-pill central
     (sus links están todos duplicados en aside.field-side, ahora drawer) */
  .nav-pill { display: none !important; }
  .field-top {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
  }
  .field-top .brand { padding: 0 !important; flex: 0 1 auto; min-width: 0; }
  .field-top .brand-logo { height: 56px !important; max-width: 300px !important; width: auto !important; }
  .field-top .field-top-logout {
    width: 44px !important; height: 44px !important;
    border-radius: 10px !important;
    margin-left: auto !important;
    flex-shrink: 0;
  }
  .field-top .fm-hamburger { margin-left: 8px !important; }
}
@media (max-width: 600px) {
  .field-top { padding: 10px 14px !important; gap: 8px !important; }
  .field-top .brand-logo { height: 52px !important; max-width: 250px !important; }
  .field-top .field-top-logout { width: 40px !important; height: 40px !important; }
}
@media (max-width: 380px) {
  .field-top .brand-logo { height: 48px !important; max-width: 220px !important; }
  .field-top .field-top-logout { width: 36px !important; height: 36px !important; }
}

/* ── Subbar ─────────────────────────────────────────────────────── */
.field-subbar {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 28px 28px !important;
  padding: 12px 20px !important;
  gap: 24px !important;
  align-items: center !important;
  margin: 0 !important;
  box-shadow: 0 6px 14px -8px rgba(2,64,192,0.12) !important;
}
/* Stack derecho: 2 filas, alineadas a la derecha, encajan sobre el lado derecho del nav */
.field-subbar .subbar-stack {
  margin-left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}
.field-subbar .subbar-stack .subbar-pills {
  justify-content: flex-end !important;
  gap: 8px !important;
}
.field-subbar .subbar-stack .subbar-meta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}
.field-subbar .subbar-stack .subbar-meta .h-link {
  font-size: 12px !important;
  text-decoration: none !important;
  color: var(--text-dim) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.field-subbar .subbar-stack .subbar-meta .h-link:hover {
  color: var(--violet) !important;
}
.field-subbar .subbar-user .avatar-lg {
  background: linear-gradient(135deg, var(--violet-soft), var(--violet-deep)) !important;
  color: #FFFFFF !important;
  box-shadow: var(--sh-violet);
}
.field-subbar .subbar-user .name { color: var(--text) !important; }
.field-subbar .subbar-user .meta { color: var(--text-faint) !important; }

/* ── Credencial Clase D · estilo carnet técnico ─────────────────── */
.credential-card {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px !important;
  padding: 10px 56px 10px 10px !important;
  background:
    linear-gradient(135deg, #FFFFFF 0%, #F4F7FE 60%, #E9EFFB 100%) !important;
  border: 1px solid rgba(2,64,192,0.18) !important;
  border-radius: 14px !important;
  box-shadow:
    0 2px 6px rgba(2,64,192,0.06),
    0 12px 24px -16px rgba(2,64,192,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  overflow: hidden;
  isolation: isolate;
}
/* Banda holográfica diagonal sutil */
.credential-card .cred-holo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      transparent 35%,
      rgba(255,180,80,0.08) 45%,
      rgba(2,64,192,0.10) 50%,
      rgba(122,90,255,0.08) 55%,
      transparent 65%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
/* Microtramado de seguridad (tipo billete) */
.credential-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(2,64,192,0.025) 0,
      rgba(2,64,192,0.025) 1px,
      transparent 1px,
      transparent 6px);
  pointer-events: none;
  z-index: 0;
}

/* Foto con badge de clase */
.credential-card .cred-photo {
  position: relative;
  width: 48px;
  height: 56px;
  border-radius: 8px;
  background: linear-gradient(160deg, #1A56D8 0%, #0240C0 60%, #012E8A 100%);
  display: grid;
  place-items: center;
  color: #FFFFFF;
  font-family: 'Funnel Display', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -8px 16px -8px rgba(0,0,0,0.25) inset,
    0 2px 4px rgba(2,46,138,0.25);
  z-index: 1;
}
.credential-card .cred-photo-initials {
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.credential-card .cred-photo-class {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FF8A2B;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: 11px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 4px rgba(255,138,43,0.35);
}

/* Bloque info */
.credential-card .cred-info {
  z-index: 1;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.credential-card .cred-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-deep);
  opacity: 0.78;
}
.credential-card .cred-name {
  font-family: 'Funnel Display', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.credential-card .cred-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 1px;
}
.credential-card .cred-chip {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: rgba(2,64,192,0.06);
  border: 1px solid rgba(2,64,192,0.12);
  border-radius: 4px;
  padding: 2px 6px;
}

/* Sello VERIFICADO rotado en esquina superior derecha */
.credential-card .cred-stamp {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 3px 7px;
  border: 1.5px solid #16A34A;
  border-radius: 4px;
  color: #16A34A;
  background: rgba(22,163,74,0.06);
  transform: rotate(-8deg);
  transform-origin: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(22,163,74,0.2);
}
.credential-card .cred-stamp-check {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.credential-card .cred-stamp-text {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.1;
  margin-top: 1px;
}

/* Hover sutil: leve shimmer en la banda holográfica */
.credential-card:hover .cred-holo {
  background:
    linear-gradient(115deg,
      transparent 30%,
      rgba(255,180,80,0.14) 42%,
      rgba(2,64,192,0.16) 50%,
      rgba(122,90,255,0.14) 58%,
      transparent 70%);
  transition: background 400ms ease;
}

/* Oculta legacy avatar/name/meta dentro de credencial */
.credential-card .avatar-lg,
.credential-card .info { display: none !important; }

.sub-pill {
  background: var(--bg-muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.sub-pill .key { color: var(--text-faint) !important; }
.sub-pill strong { color: var(--text) !important; }
.sub-pill.positive { background: var(--positive-bg) !important; border-color: rgba(22,163,74,0.20) !important; color: var(--positive) !important; }
.sub-pill.warning  { background: var(--warning-bg) !important;  border-color: rgba(217,119,6,0.20) !important;  color: var(--warning) !important; }
.sub-pill.info     { background: var(--violet-bg) !important;   border-color: rgba(2,64,192,0.22) !important; color: var(--violet) !important; }

.h-link {
  color: var(--text-dim) !important;
}
.h-link:hover { color: var(--violet) !important; }

/* ── Sidebar pill flotante ──────────────────────────────────────── */
.field-side {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh-md) !important;
  border-radius: var(--r-xl) !important;
}
.field-side .side-title { color: var(--text-faint) !important; }
.field-side .side-title .count { color: var(--violet) !important; }
.field-side .nav-item {
  color: var(--text-dim) !important;
  border-radius: var(--r-md) !important;
}
.field-side .nav-item:hover {
  background: var(--violet-bg) !important;
  color: var(--text) !important;
}
.field-side .nav-item.active {
  background: var(--violet-bg) !important;
  color: var(--violet) !important;
  border-left: 3px solid var(--violet) !important;
  font-weight: 600;
}
.field-side .nav-item.disabled {
  color: var(--text-mute) !important;
  opacity: 0.6;
}
.field-side .badge.new  { background: var(--violet) !important;   color: #FFFFFF !important; }
.field-side .badge.live { background: var(--positive) !important; color: #FFFFFF !important; }
.field-side .badge.soon { background: var(--bg-muted) !important; color: var(--text-faint) !important; border: 1px solid var(--border); }
.field-side .beta-info {
  background: var(--violet-bg) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--border) !important;
}
.field-side .beta-info strong { color: var(--violet) !important; }

/* ── Beta strip top ──────────────────────────────────────────────────────────── */
@keyframes betaGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55), 0 0 6px rgba(255,255,255,0.25); transform: scale(1); }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0.12), 0 0 18px rgba(255,255,255,0.50); transform: scale(1.06); }
}
.field-betastrip {
  background: linear-gradient(135deg, var(--violet-soft), var(--violet-deep)) !important;
  color: #FFFFFF !important;
}
.field-betastrip strong,
.field-betastrip em {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.field-betastrip-tag {
  background: rgba(255,255,255,0.95) !important;
  color: var(--violet-deep, #0240C0) !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  animation: betaGlow 2.2s ease-in-out infinite !important;
}
/* ═══════════════════════════════════════════════════════════════
   HERO redesign
   ═══════════════════════════════════════════════════════════════ */
.hero {
  background: #FFFFFF !important;
  border: 2px solid rgba(2,64,192,0.30) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 4px 18px rgba(2,64,192,0.10), var(--sh-sm);
  position: relative;
  overflow: hidden;
}
.hero .hero-text { position: relative; z-index: 1; }
.hero .hero-greet { color: var(--violet) !important; font-weight: 600 !important; letter-spacing: 0.5px; text-transform: uppercase; font-size: 12px; }
.hero h1 { color: var(--text) !important; font-family: 'Cabinet Grotesk', 'Satoshi', sans-serif; font-weight: 700; letter-spacing: -1.2px; }
.hero h1 span { color: var(--violet) !important; }
.hero-sub { color: var(--text-dim) !important; }
.hero-progress .lbl { color: var(--text-faint) !important; }
.hero-progress .pct { color: var(--violet) !important; font-weight: 700; }
.hero-cta {
  background: var(--text) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  font-weight: 600 !important;
  box-shadow: var(--sh-md);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }

/* ═══════════════════════════════════════════════════════════════
   ICONS SVG dentro de .ic (cuadros azules) · siempre blancos
   ═══════════════════════════════════════════════════════════════ */
.ic > svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: block;
}
.info-card h3 .ic > svg { width: 18px; height: 18px; stroke-width: 2.2; }
.tool-card .ic > svg, .kpi-card .head .ic > svg { width: 24px; height: 24px; }
.practice-card .ic > svg { width: 28px; height: 28px; }

/* ═══════════════════════════════════════════════════════════════
   KPI CARDS · estilo Lighter
   - fondo blanco · radius 24px · shadow sutil
   - icon top-left violet con glow
   - heading grande violet
   - número watermark gigante decorativo
   ═══════════════════════════════════════════════════════════════ */
.kpi-row { gap: 16px; }

.kpi-card {
  background-color: #FFFFFF !important;
  /* textura sutil de puntos tipo papel técnico */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(2,64,192,0.07) 1px, transparent 1.5px) !important;
  background-size: 18px 18px !important;
  background-position: 0 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-sm);
  padding: 24px !important;
  position: relative;
  overflow: hidden;
  min-height: 168px;
  transition:
    transform 320ms cubic-bezier(.25,.8,.25,1),
    box-shadow 320ms cubic-bezier(.25,.8,.25,1),
    border-color 320ms ease;
  animation: kpi-card-in 700ms cubic-bezier(.25,.8,.25,1) backwards;
}
.kpi-row > .kpi-card:nth-child(1) { animation-delay:   0ms; }
.kpi-row > .kpi-card:nth-child(2) { animation-delay:  90ms; }
.kpi-row > .kpi-card:nth-child(3) { animation-delay: 180ms; }
.kpi-row > .kpi-card:nth-child(4) { animation-delay: 270ms; }

@keyframes kpi-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kpi-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 28px 60px -22px rgba(2,64,192,0.28),
    0 12px 24px -10px rgba(2,64,192,0.14);
  border-color: rgba(2,64,192,0.28);
}

/* watermark gigante con el icono */
.kpi-card .head .ic {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--violet-soft), var(--violet)) !important;
  color: #FFFFFF !important;
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(2,64,192,0.36);
  font-size: 22px;
  position: relative;
  z-index: 1;
  transition: transform 360ms cubic-bezier(.34,1.56,.64,1), box-shadow 360ms ease;
}
.kpi-card:hover .head .ic {
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 12px 32px rgba(2,64,192,0.48);
}

.kpi-card .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}
.kpi-card .head > span:first-child {
  color: var(--text-faint) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  max-width: 60%;
  text-align: right;
  order: 2;
}
.kpi-card .head .ic { order: 1; }

.kpi-card .num {
  color: var(--violet) !important;
  font-family: 'Cabinet Grotesk', 'Satoshi', sans-serif;
  font-size: 56px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -2.5px;
  position: relative;
  z-index: 1;
  margin-bottom: 8px;
  animation: kpi-num-pop 800ms cubic-bezier(.34,1.56,.64,1) backwards 280ms;
}
@keyframes kpi-num-pop {
  from { opacity: 0; transform: scale(0.86) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.kpi-card .num small {
  color: var(--text-mute) !important;
  font-size: 22px;
  font-weight: 500;
}

.kpi-card .delta {
  font-size: 12px !important;
  color: var(--text-faint) !important;
  position: relative;
  z-index: 1;
}
.kpi-card .delta.up   { color: var(--positive) !important; }
.kpi-card .delta.down { color: var(--negative) !important; }
.kpi-card .delta.stale { color: var(--text-faint) !important; }

/* watermark number gigante en bottom-right · estilo carnet sutil */
.kpi-card::after {
  content: '01.';
  position: absolute;
  bottom: -64px;
  right: -32px;
  font-family: 'Cabinet Grotesk', 'Funnel Display', sans-serif;
  font-weight: 800;
  font-size: 220px;
  color: rgba(2,64,192,0.045);
  letter-spacing: -12px;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  transition:
    transform 600ms cubic-bezier(.25,.8,.25,1),
    color 600ms ease;
  will-change: transform;
}
.kpi-card:hover::after {
  transform: translate(-10px, -10px) scale(1.05);
  color: rgba(2,64,192,0.075);
}
.kpi-row > .kpi-card:nth-child(2)::after { content: '02.'; }
.kpi-row > .kpi-card:nth-child(3)::after { content: '03.'; }
.kpi-row > .kpi-card:nth-child(4)::after { content: '04.'; }

.kpi-card.accent {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--violet-bg) 100%) !important;
  border-color: rgba(2,64,192,0.22) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION TITLES
   ═══════════════════════════════════════════════════════════════ */
.section-title {
  color: var(--text) !important;
  font-family: 'Cabinet Grotesk', 'Satoshi', sans-serif;
  font-weight: 700 !important;
  letter-spacing: -0.5px;
}
.section-title .meta { color: var(--text-faint) !important; font-weight: 500; }
.section-title > span:first-child { color: var(--text) !important; }

/* ═══════════════════════════════════════════════════════════════
   PRACTICE CARD (atajo rápido)
   ═══════════════════════════════════════════════════════════════ */
.practice-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.practice-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: var(--violet-soft);
}
.practice-card .ic {
  background: linear-gradient(135deg, var(--violet-soft), var(--violet-deep)) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 22px rgba(2,64,192,0.36);
  border-radius: var(--r-md);
}
.practice-card .level { color: var(--violet) !important; font-weight: 600 !important; letter-spacing: 0.3px; text-transform: uppercase; font-size: 11px; }
.practice-card h3 { color: var(--text) !important; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.5px; }
.practice-card p  { color: var(--text-dim) !important; }
.practice-card .meta span { color: var(--text-faint) !important; }
.practice-card .btn-go {
  background: var(--text) !important;
  color: #FFFFFF !important;
  border-radius: var(--r-pill) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOOL CARDS · estilo Lighter clean
   ═══════════════════════════════════════════════════════════════ */
.tool-card {
  background-color: #FFFFFF !important;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(2,64,192,0.05) 1px, transparent 1.5px) !important;
  background-size: 18px 18px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-sm) !important;
  padding: 24px !important;
  transition:
    transform 320ms cubic-bezier(.25,.8,.25,1),
    box-shadow 320ms cubic-bezier(.25,.8,.25,1),
    border-color 320ms ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: tool-card-in 700ms cubic-bezier(.25,.8,.25,1) backwards;
}
.tools-grid > .tool-card:nth-child(1) { animation-delay:   0ms; }
.tools-grid > .tool-card:nth-child(2) { animation-delay:  60ms; }
.tools-grid > .tool-card:nth-child(3) { animation-delay: 120ms; }
.tools-grid > .tool-card:nth-child(4) { animation-delay: 180ms; }
.tools-grid > .tool-card:nth-child(5) { animation-delay: 240ms; }
.tools-grid > .tool-card:nth-child(6) { animation-delay: 300ms; }
.tools-grid > .tool-card:nth-child(7) { animation-delay: 360ms; }
.tools-grid > .tool-card:nth-child(8) { animation-delay: 420ms; }
.tools-grid > .tool-card:nth-child(9) { animation-delay: 480ms; }

@keyframes tool-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tool-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 24px 56px -20px rgba(2,64,192,0.30),
    0 10px 22px -8px rgba(2,64,192,0.16) !important;
  border-color: rgba(2,64,192,0.30) !important;
}

/* Watermark del icono · transparente, ancla bottom-right, drift en hover */
.tool-card .ic-watermark {
  position: absolute;
  bottom: -32px;
  right: -32px;
  width: 200px;
  height: 200px;
  color: rgba(2,64,192,0.06);
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 600ms cubic-bezier(.25,.8,.25,1),
    color 500ms ease;
  will-change: transform;
}
.tool-card .ic-watermark svg {
  width: 100% !important;
  height: 100% !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool-card:hover .ic-watermark {
  transform: translate(-12px, -12px) scale(1.08) rotate(-5deg);
  color: rgba(2,64,192,0.12);
}

/* Foreground siempre arriba del watermark */
.tool-card .top,
.tool-card h3,
.tool-card p,
.tool-card .foot { position: relative; z-index: 1; }

.tool-card .ic {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--violet-soft), var(--violet-deep)) !important;
  color: #FFFFFF !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 6px 18px rgba(2,64,192,0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 360ms cubic-bezier(.34,1.56,.64,1), box-shadow 360ms ease;
}
.tool-card:hover .ic {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 10px 28px rgba(2,64,192,0.46);
}

.tool-card .foot .arrow {
  display: inline-block;
  transition: transform 280ms cubic-bezier(.34,1.56,.64,1);
}
.tool-card:hover .foot .arrow {
  transform: translateX(5px);
}
.tool-card h3 {
  color: var(--text) !important;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-top: 16px !important;
}
.tool-card p { color: var(--text-dim) !important; }
.tool-card .pill.live {
  background: var(--positive-bg) !important;
  color: var(--positive) !important;
  border: 1px solid rgba(22,163,74,0.20) !important;
}
.tool-card .pill.soon {
  background: var(--bg-muted) !important;
  color: var(--text-faint) !important;
  border: 1px solid var(--border) !important;
}
.tool-card .foot { color: var(--text-faint) !important; border-top: 1px solid var(--border) !important; }
.tool-card .foot .arrow { color: var(--violet) !important; font-weight: 700; }
.tool-card.disabled { opacity: 0.6; }

/* ═══════════════════════════════════════════════════════════════
   INFO CARDS (Comunidad + Tu suscripción)
   ═══════════════════════════════════════════════════════════════ */
.info-card {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-sm);
  padding: 28px !important;
}
.info-card h3 {
  color: var(--text) !important;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.info-card h3 .ic {
  background: linear-gradient(135deg, var(--violet-soft), var(--violet-deep)) !important;
  color: #FFFFFF !important;
  border-radius: var(--r-sm);
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(2,64,192,0.30);
}
.info-card .feed-item {
  background: linear-gradient(135deg, rgba(2,64,192,0.04) 0%, rgba(2,64,192,0.07) 100%) !important;
  border: 1px solid rgba(2,64,192,0.12) !important;
  border-radius: 12px !important;
  border-bottom: 1px solid rgba(2,64,192,0.12) !important;
  padding: 14px 16px !important;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}
.info-card .feed-item:hover {
  background: linear-gradient(135deg, rgba(2,64,192,0.07) 0%, rgba(2,64,192,0.11) 100%) !important;
  border-color: rgba(2,64,192,0.22) !important;
  transform: translateX(2px);
  box-shadow: 0 6px 18px -10px rgba(2,64,192,0.30);
}
.info-card .feed-item .who  { color: var(--violet) !important; font-weight: 700; }
.info-card .feed-item .time { color: var(--text-mute) !important; }
.info-card .feed-item .what { color: var(--text-dim) !important; }
.info-card .kpi-stack .row { border-bottom: 1px solid var(--border-soft) !important; }
.info-card .kpi-stack .lbl { color: var(--text-faint) !important; }
.info-card .kpi-stack .val { color: var(--text) !important; font-weight: 700; }
.info-card .kpi-stack .val.pos { color: var(--positive) !important; }
.info-card .cta-link {
  color: var(--violet) !important;
  font-weight: 600 !important;
}
.info-card .cta-link:hover { color: var(--violet-deep) !important; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER · replicado del de skills.asistpro.io
   No carga footer_1.min.css del LMS (rompe layout). Estilos locales.
   ═══════════════════════════════════════════════════════════════ */
footer.field-foot,
.field-foot {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 32px 0 24px !important;
  display: block !important;
  grid-area: footer !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: 0 !important;
}
.field-foot, .field-foot * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Wrapper · bordes pastilla redondeada, position relative (para que bg-wrapper se posicione) */
.field-foot .theme-footer-1 {
  position: relative !important;
  width: 100% !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  isolation: isolate;
  color: rgba(255,255,255,0.78);
  box-shadow:
    0 24px 48px -22px rgba(2,46,138,0.40),
    0 8px 18px -6px rgba(2,46,138,0.18);
}
.field-foot .theme-footer-1__section {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  padding: 56px 0 32px !important;
}
.field-foot .theme-footer-1.has-newsletter .theme-footer-1__section {
  height: auto !important;
}
.field-foot .theme-footer-1__section-bg-wrapper {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
}
.field-foot .theme-footer-1__section-bg-wrapper.dark-only { display: none !important; }
.field-foot .theme-footer-1__section-bg-wrapper.light-only { display: block !important; }

/* Contenedor del contenido · debe estar arriba del bg */
.field-foot .position-relative.z-index-2 {
  position: relative !important;
  z-index: 2 !important;
}

/* Container y row · usa Bootstrap grid del CDN, refuerzo */
.field-foot .container {
  max-width: 1140px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  position: relative !important;
}

/* Texto + tipografía idéntica al Skills */
.field-foot .theme-footer-1 a {
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none !important;
  transition: color 160ms ease !important;
}
.field-foot .theme-footer-1 a:hover {
  color: #FFFFFF !important;
}
.field-foot .theme-footer-1 strong,
.field-foot .theme-footer-1 b {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.field-foot .theme-footer-1 h1,
.field-foot .theme-footer-1 h2,
.field-foot .theme-footer-1 h3,
.field-foot .theme-footer-1 h4,
.field-foot .theme-footer-1 h5,
.field-foot .theme-footer-1 h6 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
}

/* Newsletter · input + botón */
.field-foot .theme-footer-1 input[type="email"] {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 12px 18px;
  width: 100%;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.field-foot .theme-footer-1 input[type="email"]:focus {
  border-color: rgba(255,255,255,0.40);
  background: rgba(255,255,255,0.14);
}
.field-foot .theme-footer-1 input[type="email"]::placeholder {
  color: rgba(255,255,255,0.50);
}
.field-foot .theme-footer-1 .btn,
.field-foot .theme-footer-1 button[type="submit"] {
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.30);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 12px 28px;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 160ms ease;
  width: auto;
  display: inline-block;
}
.field-foot .theme-footer-1 .btn:hover,
.field-foot .theme-footer-1 button[type="submit"]:hover {
  background: rgba(255,255,255,0.30);
  border-color: rgba(255,255,255,0.42);
}

/* legacy field-foot items (eliminados) */
.field-foot > .item, .field-foot > .sep, .field-foot > .spacer { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   Feedback FAB (que aparece via _field.js)
   ═══════════════════════════════════════════════════════════════ */
.feedback-fab {
  background: var(--text) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 24px rgba(9,9,11,0.20) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile ajuste
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .kpi-card { min-height: 140px; padding: 20px !important; }
  .kpi-card .num { font-size: 44px !important; }
  .kpi-card::after { font-size: 120px; bottom: -22px; }
  .hero h1 { letter-spacing: -0.8px; }
}

/* ═══════════════════════════════════════════════════════════════
   FORMS · panels + inputs · azul AsistPro
   Aplica a todas las tools: calc-panel · sel-panel · result-panel ·
   prot-card · input-group · input-grp · tab-row · field-row
   ═══════════════════════════════════════════════════════════════ */

/* Panel exterior · borde azul + sombra azul sutil */
.calc-panel,
.sel-panel,
.result-panel,
.prot-card {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(2,64,192,0.22) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 4px 14px -8px rgba(2,64,192,0.18),
    0 1px 3px rgba(2,64,192,0.06) !important;
}

/* Inputs · borde azul + bg blanco + texto oscuro */
.input-group input,
.input-group select,
.input-grp input,
.input-grp select {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(2,64,192,0.25) !important;
  color: #09090B !important;
  border-radius: 10px !important;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease,
    background 200ms ease !important;
}
.input-group input:hover,
.input-group select:hover,
.input-grp input:hover,
.input-grp select:hover {
  border-color: rgba(2,64,192,0.45) !important;
  background: #FAFCFF !important;
}
.input-group input:focus,
.input-group select:focus,
.input-grp input:focus,
.input-grp select:focus {
  border-color: #0240C0 !important;
  box-shadow:
    0 0 0 3px rgba(2,64,192,0.15),
    0 2px 6px rgba(2,64,192,0.10) !important;
  background: #FFFFFF !important;
}

/* Labels · azul oscuro AsistPro */
.input-group label,
.input-grp label {
  color: #012E8A !important;
  letter-spacing: 0.08em !important;
}

/* Hint · gris medio */
.input-group .hint,
.input-grp .hint {
  color: rgba(9,9,11,0.55) !important;
}

/* Unit (suffix dentro del input) */
.input-group .unit,
.input-grp .unit {
  color: rgba(2,64,192,0.65) !important;
}

/* Tab-row · contenedor blanco con borde azul */
.tab-row {
  background: rgba(2,64,192,0.04) !important;
  border: 1.5px solid rgba(2,64,192,0.22) !important;
  border-radius: 10px !important;
}
.tab-row .tab {
  color: rgba(9,9,11,0.55) !important;
  border-radius: 7px !important;
  transition: all 200ms ease !important;
}
.tab-row .tab:hover:not(.active) {
  color: #0240C0 !important;
  background: rgba(2,64,192,0.06) !important;
}
.tab-row .tab.active {
  background: linear-gradient(135deg, #0240C0 0%, #012E8A 100%) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 4px 12px -2px rgba(2,64,192,0.45),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* Panel sub (subtítulo mono) · azul oscuro AsistPro */
.calc-panel .panel-sub,
.sel-panel .panel-sub {
  color: rgba(2,46,138,0.65) !important;
}

/* Panel h2 · texto oscuro */
.calc-panel h2,
.sel-panel h2 {
  color: #09090B !important;
}

/* Panel pill (chip junto al h2) · azul AsistPro */
.calc-panel h2 .pill,
.sel-panel h2 .pill {
  background: rgba(2,64,192,0.10) !important;
  color: #0240C0 !important;
  border: 1px solid rgba(2,64,192,0.30) !important;
}

/* Result panel · acento amarillo brand → cambio a azul también */
.result-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(2,64,192,0.06), transparent 50%),
    #FFFFFF !important;
  border-color: rgba(2,64,192,0.30) !important;
}
.result-panel h2 .pill {
  background: rgba(2,64,192,0.10) !important;
  color: #0240C0 !important;
  border-color: rgba(2,64,192,0.30) !important;
}

/* Big result · borde azul + bg blanco · estados warn/err mantienen su color */
.big-result {
  background: linear-gradient(180deg, #F4F7FE 0%, #FFFFFF 100%) !important;
  border-color: rgba(2,64,192,0.35) !important;
}
.big-result .lbl { color: rgba(2,46,138,0.70) !important; }
.big-result .val { color: #0240C0 !important; }
.big-result .desc { color: #09090B !important; }
.big-result .desc strong { color: #0240C0 !important; }

/* Result cells (grid de outputs secundarios) */
.result-cell {
  background: rgba(2,64,192,0.04) !important;
  border: 1px solid rgba(2,64,192,0.18) !important;
}
.result-cell .lbl { color: rgba(2,46,138,0.70) !important; }
.result-cell .val { color: #09090B !important; }

/* Botones de acción */
.btn-action {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(2,64,192,0.25) !important;
  color: #0240C0 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.btn-action:hover {
  background: rgba(2,64,192,0.06) !important;
  border-color: #0240C0 !important;
  color: #012E8A !important;
}
.btn-action.primary {
  background: linear-gradient(135deg, #0240C0 0%, #012E8A 100%) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}
.btn-action.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 16px -4px rgba(2,64,192,0.40);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE · auditoría 27 Abr 2026
   Aplica a /pro/, /skills/ y las 8 tools que linkean este CSS.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  body { overflow-x: hidden; }
  .app { padding: 0 16px !important; gap: 0 !important; }

  /* Header pill mobile · logo + top-capsule pequeño · sin nav-pill */
  header.field-top {
    padding: 10px 14px !important;
    gap: 10px !important;
    border-radius: 22px !important;
    margin: 12px 0 0 !important;
    flex-wrap: nowrap !important;
  }
  header.field-top .brand { padding: 0 4px !important; flex-shrink: 1 !important; min-width: 0 !important; }
  .field-top .brand-logo { height: 52px !important; max-width: 250px !important; width: auto !important; }

  /* Brand-title (label/name de las tools) · ocultar en mobile */
  .field-top .brand-title { display: none !important; }

  /* Top-capsule (clock widget) · solo lo esencial */
  .field-top .top-capsule {
    padding: 4px 10px 4px 4px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }
  .field-top .top-capsule .clock { width: 24px !important; height: 24px !important; }
  .field-top .top-capsule .info .lbl,
  .field-top .top-capsule .info .sub { display: none !important; }
  .field-top .top-capsule .info .val { font-size: 11px !important; }

  /* Nav-pill (en /pro/ tiene links + CTA) · solo deja el CTA */
  .field-top .nav-pill {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .field-top .nav-pill > a:not(.nav-pill-cta) { display: none !important; }
  .field-top .nav-pill-divider { display: none !important; }
  .field-top .nav-pill-cta {
    padding: 9px 14px !important;
    font-size: 12px !important;
  }

  /* Subbar credencial · stack vertical sin desbordar */
  .field-subbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }
  .field-subbar .credential-card {
    padding: 10px 50px 10px 10px !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }
  .field-subbar .credential-card .cred-photo {
    width: 40px !important; height: 48px !important;
    font-size: 16px !important;
    border-radius: 7px !important;
  }
  .field-subbar .credential-card .cred-photo-class {
    width: 18px !important; height: 18px !important;
    font-size: 9px !important;
    bottom: -5px !important; right: -5px !important;
  }
  .field-subbar .credential-card .cred-label { font-size: 7.5px !important; letter-spacing: 0.10em !important; }
  .field-subbar .credential-card .cred-name { font-size: 13px !important; }
  .field-subbar .credential-card .cred-meta { gap: 4px !important; }
  .field-subbar .credential-card .cred-chip { font-size: 8.5px !important; padding: 1px 5px !important; }
  .field-subbar .credential-card .cred-stamp {
    transform: rotate(-8deg) scale(0.78) !important;
    top: 6px !important; right: 6px !important;
    transform-origin: top right !important;
  }
  .field-subbar .subbar-stack {
    margin-left: 0 !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .field-subbar .subbar-pills {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .field-subbar .sub-pill { font-size: 9.5px !important; padding: 3px 8px !important; }
  .field-subbar .subbar-meta { flex-wrap: wrap !important; gap: 8px !important; justify-content: flex-start !important; }
  .field-subbar .subbar-meta .h-link { font-size: 11.5px !important; }

  /* Sidebar · oculta (ya estaba pero refuerzo) */
  .field-side:not(.fm-drawer-open) { display: none !important; }
  .field-main { padding: 12px 0 32px !important; }

  /* Hero del dashboard */
  .hero {
    padding: 24px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .hero h1 { font-size: 24px !important; line-height: 1.2 !important; }
  .hero-sub { font-size: 13.5px !important; }
  .hero-cta { align-self: flex-start !important; }

  /* KPI row · 2 cols en tablet, 1 col en mobile */
  .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .kpi-card { padding: 18px !important; min-height: 130px !important; }
  .kpi-card .num { font-size: 38px !important; }
  .kpi-card::after { font-size: 130px; bottom: -30px; right: -15px; }

  /* Section titles */
  .section-title { font-size: 18px !important; margin: 24px 0 16px !important; }

  /* Tool cards · 1 col */
  .tools-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .tool-card { padding: 20px !important; }
  .tool-card h3 { font-size: 16px !important; }
  .tool-card .ic-watermark { width: 160px !important; height: 160px !important; bottom: -24px !important; right: -24px !important; }

  /* Cards row (Comunidad + Suscripción) · 1 col */
  .cards-row { grid-template-columns: 1fr !important; gap: 14px !important; }
  .info-card { padding: 22px !important; }
  .info-card .feed-item { padding: 12px 14px !important; }
  .info-card .feed-item .what { font-size: 12.5px !important; }

  /* Practice card */
  .practice-card { flex-direction: column !important; gap: 12px !important; padding: 20px !important; }
  .practice-card .ic { font-size: 32px !important; }

  /* Forms (calculadoras) */
  .calc-wrap, .sel-wrap { grid-template-columns: 1fr !important; gap: 14px !important; }
  .calc-panel, .sel-panel, .result-panel, .prot-card { padding: 18px !important; border-radius: 14px !important; }
  .calc-panel h2, .sel-panel h2 { font-size: 14.5px !important; }
  .field-row, .field-row.three { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .field-row.full { grid-template-columns: 1fr !important; }
  .input-group input, .input-group select,
  .input-grp input, .input-grp select { font-size: 16px !important; padding: 11px 12px !important; } /* 16px evita zoom-in iOS */
  .input-group label, .input-grp label { font-size: 9.5px !important; }
  .tab-row .tab { font-size: 10.5px !important; padding: 7px 6px !important; }
  .big-result .val { font-size: 36px !important; }
  .big-result { padding: 18px !important; }
  .result-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .result-cell { padding: 8px 10px !important; }

  /* Page head (h1 con btn-actions) */
  .page-head { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding-bottom: 16px !important; margin-bottom: 18px !important; }
  .page-head h1 { font-size: 22px !important; }
  .page-head .actions { flex-wrap: wrap !important; gap: 8px !important; }
  .btn-action { font-size: 11.5px !important; padding: 7px 12px !important; }

  /* Footer pill · 4 cols → 1 col, padding reducido */
  .field-foot .theme-footer-1 { border-radius: 22px !important; }
  .field-foot .theme-footer-1__section { padding: 36px 18px 16px !important; }
  .field-foot .theme-footer-1 .container,
  .field-foot .theme-footer-1 [class*="container"] { padding: 0 !important; }
  .field-foot .row { row-gap: 24px !important; }
  .field-foot h4 { font-size: 13.5px !important; margin-bottom: 10px !important; }
  .field-foot a, .field-foot p { font-size: 13px !important; }

  /* Beta info / sidebar info pills */
  .beta-info { font-size: 11.5px !important; padding: 12px !important; }
}

@media (max-width: 600px) {
  .app { padding: 0 12px !important; }

  /* Header aún más compacto */
  header.field-top { padding: 8px 10px !important; gap: 6px !important; }
  .field-top .brand-logo { height: 48px !important; max-width: 220px !important; width: auto !important; }

  /* KPI · 1 col en mobile real */
  .kpi-row { grid-template-columns: 1fr !important; }

  /* Forms en mobile chico · 1 col */
  .field-row, .field-row.three { grid-template-columns: 1fr !important; }
  .result-grid { grid-template-columns: 1fr 1fr !important; }

  /* Subbar credencial más compacto */
  .field-subbar { padding: 10px !important; gap: 8px !important; }
  .field-subbar .credential-card .cred-stamp { display: none !important; }

  /* Hero h1 dashboard */
  .hero h1 { font-size: 20px !important; }
  .hero { padding: 18px !important; border-radius: 14px !important; }

  /* Ocultar la sub del top-capsule en mobile chico */
  .field-top .top-capsule { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MISSION HERO — fondo azul (igual al hero card de practica/index)
   ═══════════════════════════════════════════════════════════════ */
.mission-hero {
  background: linear-gradient(135deg, #0240C0 0%, #012E8A 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 40px -10px rgba(2,64,192,0.50), 0 4px 12px -4px rgba(2,64,192,0.30) !important;
}
.mission-hero .num-badge {
  color: rgba(255,255,255,0.22) !important;
}
.mission-hero h1 {
  color: #FFFFFF !important;
}
.mission-hero .lead {
  color: rgba(255,255,255,0.78) !important;
}
/* pills sobre fondo azul */
.mission-hero .pill {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.90) !important;
}
.mission-hero .pill.lvl-1 {
  background: rgba(34,197,94,0.18) !important;
  border-color: rgba(34,197,94,0.45) !important;
  color: #6EF9A0 !important;
}
.mission-hero .pill.lvl-2 {
  background: rgba(245,158,11,0.18) !important;
  border-color: rgba(245,158,11,0.45) !important;
  color: #FCD34D !important;
}
.mission-hero .pill.mod {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.88) !important;
}
/* progress circle sobre azul */
.mission-hero .progress-circ .pct {
  color: #FFFFFF !important;
}


/* ═══════════════════════════════════════════════════════════════
   PRÁCTICA · Body identity overrides
   Transforma las secciones de contenido de las misiones
   para que tengan identidad de marca (azul + naranja)
   ═══════════════════════════════════════════════════════════════ */

/* ── Phase card — borde izquierdo azul + sombra tenue ── */
.phase {
  border-left: 4px solid #0240C0 !important;
  background: #FFFFFF !important;
  box-shadow: 0 2px 12px rgba(2,64,192,0.07), 0 1px 3px rgba(2,64,192,0.04) !important;
}

/* ── Phase header — banda azul full-bleed ── */
.phase-head {
  background: linear-gradient(135deg, #0240C0 0%, #1254D6 100%) !important;
  border-radius: 12px 12px 0 0 !important;
  margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-5) calc(-1 * var(--s-6)) !important;
  padding: 14px var(--s-6) !important;
  border-bottom: none !important;
}
.phase-head h2 {
  color: #FFFFFF !important;
  font-size: 17px !important;
}
.phase-head .ic {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.22) !important;
  font-size: 17px !important;
}
.phase-head .tag {
  color: rgba(255,255,255,0.65) !important;
  background: rgba(255,255,255,0.12) !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
}

/* ── Brief text — sin límite de ancho ── */
.brief-text {
  max-width: none !important;
  color: #1a2a4a !important;
  font-size: 15px !important;
  line-height: 1.70 !important;
}
.brief-text strong {
  color: #0240C0 !important;
  font-weight: 700 !important;
}
.brief-text em {
  color: #FF6B1A !important;
  font-style: normal !important;
  font-weight: 600 !important;
}

/* ── Callout — azul brand con borde izquierdo fuerte ── */
.brief-callout {
  background: rgba(2,64,192,0.05) !important;
  border: 1px solid rgba(2,64,192,0.18) !important;
  border-left: 4px solid #0240C0 !important;
  border-radius: 0 10px 10px 0 !important;
}
.brief-callout .ic { font-size: 20px !important; }
.brief-callout p { color: #1a2a4a !important; }
.brief-callout p strong { color: #0240C0 !important; }

/* ── Goals list — chips azules con número ── */
.goal-row {
  background: rgba(2,64,192,0.03) !important;
  border: 1px solid rgba(2,64,192,0.12) !important;
  border-left: 3px solid #0240C0 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 12px 16px !important;
}
.goal-row .check {
  background: #0240C0 !important;
  border-color: #0240C0 !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  font-size: 11px !important;
}
.goal-row .txt strong { color: #0240C0 !important; font-weight: 700 !important; }

/* ── Tool-mini — icon con fondo azul brand ── */
.tool-mini {
  border: 1px solid rgba(2,64,192,0.14) !important;
  background: #FAFBFF !important;
}
.tool-mini:hover {
  border-color: #0240C0 !important;
  background: rgba(2,64,192,0.04) !important;
  box-shadow: 0 6px 20px rgba(2,64,192,0.14) !important;
  transform: translateY(-2px) !important;
}
.tool-mini .icon {
  background: #0240C0 !important;
  border-color: #0240C0 !important;
  border-radius: 10px !important;
}
.tool-mini .num { color: #FF6B1A !important; letter-spacing: 0.14em !important; }
.tool-mini h4 { color: #0D1A36 !important; font-weight: 700 !important; }
.tool-mini p { color: #4a5e82 !important; }

/* ── Stepper — dots azules activos ── */
.m-stepper .step.active .dot {
  background: #0240C0 !important;
  border-color: #0240C0 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(2,64,192,0.18) !important;
}
.m-stepper .step.active .lbl { color: #0240C0 !important; }

/* ── Action steps — número de paso azul ── */
.action-step {
  border: 1px solid rgba(2,64,192,0.12) !important;
  background: #FAFBFF !important;
}
.action-step.done { background: rgba(34,197,94,0.04) !important; border-color: rgba(34,197,94,0.25) !important; }
.action-step .num {
  background: #0240C0 !important;
  color: #FFFFFF !important;
  border-color: #0240C0 !important;
}

/* ── Quiz questions ── */
.quiz-q {
  border: 1px solid rgba(2,64,192,0.12) !important;
  background: #FAFBFF !important;
}
.quiz-q .q-num {
  color: #0240C0 !important;
  font-weight: 800 !important;
}
.quiz-opt:has(input:checked) {
  background: rgba(2,64,192,0.06) !important;
  border-color: #0240C0 !important;
}

/* ── Cierre / Badge unlock ── */
.badge-unlock {
  background: linear-gradient(135deg, #0240C0 0%, #012E8A 100%) !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
}
.badge-unlock .body h3 { color: #FFFFFF !important; }
.badge-unlock .body p { color: rgba(255,255,255,0.80) !important; }

/* ── Reflection cards ── */
.refl-card {
  border: 1px solid rgba(2,64,192,0.12) !important;
  border-top: 3px solid #0240C0 !important;
  background: #FAFBFF !important;
}
.refl-card .lbl { color: #0240C0 !important; font-weight: 700 !important; }

/* ── Next button (footer) ── */
.next-btn:not(:disabled) {
  background: linear-gradient(135deg, #0240C0 0%, #012E8A 100%) !important;
  box-shadow: 0 6px 20px rgba(2,64,192,0.35) !important;
}
.next-btn:not(:disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(2,64,192,0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR · Light con identidad brand (blanca + azul/naranja)
   ═══════════════════════════════════════════════════════════════ */

/* Marco azul brand */
.field-side {
  background: #FFFFFF !important;
  border: 2px solid #0240C0 !important;
  box-shadow: 0 4px 24px rgba(2,64,192,0.12), 0 1px 4px rgba(2,64,192,0.08) !important;
}

/* Títulos de sección — más visibles */
.field-side .side-title {
  color: #0240C0 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
}
.field-side .side-title .count {
  color: #FF8A2B !important;
  background: rgba(255,138,43,0.10) !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,138,43,0.28) !important;
}

/* Nav items — texto oscuro, icon azul */
.field-side .nav-item {
  color: #374151 !important;
  border-left: 2px solid transparent !important;
  border-radius: 8px !important;
}
.field-side .nav-item .nm { color: #374151 !important; }
.field-side .nav-item .ic {
  background: rgba(2,64,192,0.07) !important;
  border-color: rgba(2,64,192,0.14) !important;
}
.field-side .nav-item .ic svg { stroke: #0240C0 !important; }

/* Hover */
.field-side .nav-item:hover {
  background: rgba(2,64,192,0.05) !important;
  color: #0240C0 !important;
  border-left-color: rgba(2,64,192,0.35) !important;
}
.field-side .nav-item:hover .nm { color: #0240C0 !important; }
.field-side .nav-item:hover .ic { background: rgba(2,64,192,0.12) !important; }
.field-side .nav-item:hover .ic svg { stroke: #0240C0 !important; }

/* Active — naranja */
.field-side .nav-item.active {
  background: rgba(255,138,43,0.08) !important;
  color: #CC5500 !important;
  border-left: 3px solid #FF8A2B !important;
  font-weight: 700 !important;
}
.field-side .nav-item.active .nm { color: #CC5500 !important; }
.field-side .nav-item.active .ic {
  background: rgba(255,138,43,0.15) !important;
  border-color: rgba(255,138,43,0.35) !important;
}
.field-side .nav-item.active .ic svg { stroke: #FF8A2B !important; }

/* Disabled */
.field-side .nav-item.disabled {
  color: #9CA3AF !important;
  opacity: 1 !important;
}
.field-side .nav-item.disabled .ic {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.07) !important;
}
.field-side .nav-item.disabled .ic svg { stroke: #D1D5DB !important; }

/* Badges */
.field-side .badge.new  { background: #0240C0 !important; color: #FFFFFF !important; }
.field-side .badge.live { background: #16a34a !important; color: #FFFFFF !important; }
.field-side .badge.soon {
  background: #F3F4F6 !important;
  color: #9CA3AF !important;
  border: 1px solid #E5E7EB !important;
}

/* Beta info */
.field-side .beta-info {
  background: rgba(2,64,192,0.05) !important;
  border: 1px solid rgba(2,64,192,0.18) !important;
  border-left: 3px solid #0240C0 !important;
  color: #374151 !important;
  border-radius: 0 8px 8px 0 !important;
}
.field-side .beta-info strong { color: #0240C0 !important; }

/* Icons sidebar — fondo blanco, sin recuadro azul */
.field-side .nav-item .ic {
  background: transparent !important;
  border-color: transparent !important;
}
.field-side .nav-item:hover .ic {
  background: rgba(2,64,192,0.08) !important;
  border-color: rgba(2,64,192,0.14) !important;
}
.field-side .nav-item.active .ic {
  background: rgba(255,138,43,0.15) !important;
  border-color: rgba(255,138,43,0.35) !important;
}
.field-side .nav-item.disabled .ic {
  background: transparent !important;
  border-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV INYECTADO · mobile-nav.js inject en drawer
   ═══════════════════════════════════════════════════════════════ */
.fm-nav-section {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 12px !important;
}
.fm-nav-cta {
  background: linear-gradient(135deg, #EE5904 0%, #C84C00 100%) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  justify-content: center !important;
  margin-top: 6px !important;
  box-shadow: 0 4px 14px rgba(238,89,4,0.35) !important;
}
.fm-nav-cta .nm  { color: #FFFFFF !important; font-weight: 700 !important; }
.fm-nav-cta .ic  { background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.25) !important; }
.fm-nav-cta:hover { opacity: 0.90; }
.fm-nav-cta:active { transform: scale(0.98) !important; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE POLISH — auditoría 28 Abr 2026
   Mejoras específicas por página: roadmap, tools, practica
   ═══════════════════════════════════════════════════════════════ */

/* ── Touch targets generales ── */
@media (max-width: 991px) {
  /* Filter chips del roadmap: touch targets más grandes */
  .filter-chip {
    padding: 8px 16px !important;
    font-size: 12px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Roadmap hero stats: wrap en 2×2 en mobile */
  .rm-hero-stat-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .rm-hero-stat {
    min-width: 70px !important;
    padding: 8px 12px !important;
  }
  .rm-hero-stat strong { font-size: 20px !important; }

  /* Roadmap suggest section: stacking correcto */
  .rm-suggest { padding: 28px 18px !important; border-radius: 16px !important; }
  .rm-suggest-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .rm-suggest-title-big { font-size: 22px !important; line-height: 1.2 !important; }
  .rm-suggest-subtitle { font-size: 13px !important; margin-bottom: 20px !important; }
  .rm-suggest-why-item { font-size: 12px !important; }
  /* Ocultar bullets why en mobile muy chico (los 4 bullets alargan mucho) */
  .rm-suggest-card { padding: 18px !important; border-radius: 14px !important; }

  /* Roadmap kanban: asegurar 1 col */
  .kanban { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Roadmap cómo funciona: 1 col */
  .rm-how { grid-template-columns: 1fr !important; gap: 10px !important; }
  .rm-how-card { padding: 14px !important; }

  /* Rm suggest inputs móvil */
  .rm-input, .rm-textarea, .rm-select {
    font-size: 16px !important; /* evita zoom iOS */
    min-height: 44px !important;
  }
  .rm-textarea { min-height: 90px !important; }
  .rm-type-pill { min-height: 36px !important; font-size: 11px !important; padding: 7px 12px !important; }
  .rm-suggest-btn { width: 100% !important; justify-content: center !important; min-height: 48px !important; font-size: 15px !important; }

  /* Section header roadmap */
  .rm-section-hd { margin-bottom: 12px !important; }

  /* Practica: phase cards en mobile */
  .phase-tab { font-size: 10px !important; padding: 6px 10px !important; min-height: 36px !important; }
  .phase-content { padding: 16px !important; }
  .mission-step { padding: 12px !important; }
  .mission-step .step-num { width: 28px !important; height: 28px !important; font-size: 11px !important; flex-shrink: 0 !important; }

  /* Tabla RIC: contenedor scrollable horizontal */
  .ric-table-wrap, .ric-results { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .ric-result-card { min-width: 280px !important; }

  /* Subbar meta row: ocultar LIC SEC en mobile para no recargar */
  .subbar-meta .sub-pill.info:not(.key) { display: none !important; }

  /* Botones de acción en page-head: full width en mobile */
  .page-head .actions .btn-action { min-height: 44px !important; flex: 1 1 calc(50% - 6px) !important; }
  .page-head .actions .btn-action.ghost { flex: 0 0 auto !important; }

  /* Glosario: categoría chips */
  .glos-cats { flex-wrap: wrap !important; gap: 6px !important; }
  .glos-cat-chip { font-size: 11px !important; padding: 6px 12px !important; min-height: 34px !important; }

  /* Cubicador: tabla circuitos */
  .circuit-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .circuit-row { min-width: 500px !important; }
}

@media (max-width: 600px) {
  /* Hero stats en columna 2x2 ajustado */
  .rm-hero-stat-row { gap: 8px !important; }
  .rm-hero-stat { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; }

  /* Ocultar why-items en mobile muy chico (ahorra espacio) */
  .rm-suggest-why { display: none !important; }

  /* Roadmap hero compact */
  .rm-hero { padding: 22px 16px !important; border-radius: 14px !important; }
  .rm-hero-title { font-size: 24px !important; }

  /* Rm how: ocultar icono para ahorrar ancho */
  .rm-how-num { width: 30px !important; height: 30px !important; font-size: 12px !important; }

  /* Tipo pills del formulario: wrap en 2x2 */
  .rm-type-pills { gap: 6px !important; }
  .rm-type-pill { flex: 1 1 calc(50% - 3px) !important; justify-content: center !important; }

  /* 5 reglas de oro: pasos de intervención en 1 col */
  .steps-grid { grid-template-columns: 1fr !important; }

  /* Practica: nav tabs scroll horizontal */
  .phase-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 2px !important; }
  .phase-tab { white-space: nowrap !important; }
}

/* ════════════════════════════════════════════════════════════════
   PAGE-HEAD · Hero azul unificado para todos los tools
   (29 Abr 2026 · cubicador / tabla-ric / 5-reglas-oro / glosario / calculadoras)
   ──────────────────────────────────────────────────────────────── */
.page-head {
  background: linear-gradient(135deg, #0240C0 0%, #012E8A 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 26px 28px !important;
  border-radius: 18px !important;
  margin-bottom: 22px !important;
  color: #FFFFFF !important;
  box-shadow: 0 18px 40px -12px rgba(2,64,192,0.32), 0 4px 12px rgba(0,0,0,0.08) !important;
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(94,252,232,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.page-head > * { position: relative; z-index: 1; }

.page-head h1 {
  color: #FFFFFF !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 8px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-head h1 .ic {
  font-size: 28px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.page-head .info { color: #FFFFFF !important; }
.page-head .sub,
.page-head p.sub {
  color: rgba(255,255,255,0.82) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 70ch;
}
.page-head .sub strong,
.page-head p strong {
  color: #FFD24A !important;
  font-weight: 700;
}

.page-head .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.page-head .actions .btn-action {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.18s !important;
}
.page-head .actions .btn-action:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.50) !important;
  transform: translateY(-1px);
}
.page-head .actions .btn-action.danger {
  background: rgba(220,38,38,0.30) !important;
  border-color: rgba(255,150,150,0.50) !important;
}
.page-head .actions .btn-action.ghost {
  background: rgba(255,255,255,0.06) !important;
}

/* Mobile: reducir padding/font */
@media (max-width: 600px) {
  .page-head { padding: 20px 18px !important; border-radius: 14px !important; }
  .page-head h1 { font-size: 22px !important; }
  .page-head h1 .ic { font-size: 24px; }
  .page-head .sub { font-size: 13px !important; }
}