/* ===========================================================================
   Webskill · Widget Diagnóstico Web + IA — variante clara
   Se carga ADEMÁS de widget.css (que ya define toda la estructura sobre
   variables --wsk-*). Este archivo solo redefine esas variables para que
   el widget se vea como el resto de webskill.es (papel/azulejo) en vez de
   con su piel oscura de serie. Pensado para incrustarse con el shortcode
   [webskill_diagnostico theme="light"] dentro de bloques como .ws-analiza-caja.
   Fuente de los tokens: BRAND-BOOK-AZULEJO-V3 (mismo CSS global del sitio).
   =========================================================================== */
.lead-magnet.lead-magnet--light {
  --wsk-dark: #E8ECF1;           /* --ws-papel-hondo · paso inactivo, recesado */
  --wsk-dark-alt: #FFFFFF;       /* --ws-blanco · cuerpo de la tarjeta */
  --wsk-surface: #FFFFFF;        /* --ws-blanco · paso activo */
  --wsk-primary: #0369A1;        /* --ws-azulejo */
  --wsk-primary-hover: #0F172A;  /* --ws-azulejo-hondo · oscurece al hover, como .ws-btn--1 */
  --wsk-primary-hover-shadow: rgba(15, 23, 42, 0.22);
  --wsk-cream: #F8FAFC;          /* --ws-papel */
  --wsk-success: #22C55E;
  --wsk-error: #DC2626;          /* --ws-alerta */
  --wsk-warning: #F59E0B;
  --wsk-text: #020617;           /* --ws-tinta */
  --wsk-text-soft: #334155;      /* --ws-tinta-media */
  --wsk-text-mut: #64748B;       /* --ws-tinta-suave */
  --wsk-line: #E2E8F0;           /* --ws-linea */
  --wsk-line-soft: #F1F5F9;      /* --ws-linea-fina */
  --wsk-fill: #FFFFFF;           /* inputs blancos con borde, como .ws-form input */
  --wsk-primary-soft: rgba(3, 105, 161, 0.08);   /* --ws-azulejo-velo */
  --wsk-primary-border: rgba(3, 105, 161, 0.28); /* --ws-azulejo-borde */
  --wsk-ring: 0 0 0 3px rgba(3, 105, 161, 0.28);
  --wsk-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06); /* --ws-shadow-lg */
  /* --wsk-ia-* se dejan igual: el acento violeta/rosa de IA funciona sobre
     blanco tal cual, y el brand book no trae sustituto (ver widget.css). */
}

/* La tarjeta necesita su propio borde: sobre fondo blanco de página,
   sin el border original se fundía con .ws-analiza-caja. */
.lead-magnet.lead-magnet--light .diagnostic-card {
  border-color: var(--wsk-line);
}

/* Flecha del <select>: iba grabada en azul claro (tema oscuro). En claro
   se redibuja en azulejo #0369A1 para que combine con el resto de iconos. */
.lead-magnet.lead-magnet--light select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%230369A1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}