/* ═══════════════════════════════════════════════════════════════
   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 { 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);
}

/* 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: 22px !important; max-width: 160px !important; }
}
@media (max-width: 600px) {
  .field-top { padding: 10px 14px !important; }
  .field-top .brand-logo { height: 20px !important; max-width: 140px !important; }
}
@media (max-width: 380px) {
  .field-top .brand-logo { height: 18px !important; max-width: 120px !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 ─────────────────────────────────────────────── */
.field-betastrip {
  background: linear-gradient(135deg, var(--violet-soft), var(--violet-deep)) !important;
  color: #FFFFFF !important;
}
.field-betastrip-tag {
  background: rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO redesign
   ═══════════════════════════════════════════════════════════════ */
.hero {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 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: 22px !important; max-width: 130px !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 { 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: 18px !important; max-width: 110px !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; }
}