/* ===================================================================
   PATHWAY ICON SYSTEM — una sola fuente de verdad para TODA la plataforma.
   Portales del cliente, paneles del coach (panel-v2 / multicoach), landing
   pública y páginas de empresa usan EXCLUSIVAMENTE iconos Lucide
   (https://lucide.dev/icons) renderizados por pw-icons.js.

   Reglas del sistema (NO mezclar librerías, NO emojis en el chrome):
     · Estilo    : outline (line icons), nunca filled.
     · Grosor    : stroke-width 2px.
     · Tamaño    : 20px por defecto · 18px en botones chicos (.pw-ic-sm).
     · Color     : #1F4030 (token --pw-icon). En controles de color propio
                   (botones con fondo), el icono hereda currentColor.
   Cambiar el look de TODOS los iconos = cambiar SOLO este archivo.
   =================================================================== */
:root{
  --pw-icon:#1F4030;            /* color canónico del icono en superficies claras */
  --pw-icon-sz:20px;            /* tamaño por defecto */
  --pw-icon-sz-sm:18px;        /* tamaño en botones chicos */
  --pw-icon-chip:rgba(31,64,48,.07); /* fondo del "chip" gris del icono */
}

/* El SVG que emite pw-icons.js. stroke=currentColor -> el color lo pone la clase
   (o el contenedor). Así un mismo icono queda #1F4030 sobre blanco y blanco
   sobre un botón verde, sin duplicar path data. */
.pw-ic{
  width:var(--pw-icon-sz); height:var(--pw-icon-sz);
  flex:0 0 auto; display:inline-block; vertical-align:-.18em;
  color:var(--pw-icon); stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.pw-ic-sm{ width:var(--pw-icon-sz-sm); height:var(--pw-icon-sz-sm); }
/* Fuerza herencia de color: para iconos sobre badges/fondos de color propio
   (ej. check blanco sobre badge verde) donde no aplica la lista de controles. */
.pw-ic-cc{ color:currentColor; }

/* Cuando el icono vive dentro de un control con color propio (botón sólido,
   badge de color, link accent), hereda ese color en vez de forzar #1F4030.
   Esto evita iconos verde-oscuro invisibles sobre fondos oscuros. */
.btn .pw-ic, .btn-block .pw-ic, .btn-sm .pw-ic,
.btn-primary .pw-ic, .btn-secondary .pw-ic,
.pw-primary-cta .pw-ic, .pw-mini-cta .pw-ic,
.hp-ni .pw-ic, .hp-step .pw-ic, .pw-choice-emoji .pw-ic,
button .pw-ic, a.pw-ic-inherit .pw-ic, .pw-ic-inherit .pw-ic{ color:currentColor; }

/* "Chip" del icono: el cuadradito redondeado gris del screenshot de referencia
   (Resumen / Fortalezas / Áreas a mejorar / Estrategia). Un solo componente. */
.pw-icchip{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:10px;
  background:var(--pw-icon-chip); color:var(--pw-icon); flex:0 0 auto;
}
.pw-icchip.sm{ width:30px; height:30px; border-radius:8px; }
.pw-icchip .pw-ic{ color:inherit; }

/* Host de auto-montado: <i data-ic="edit"></i> queda inline con el texto. */
i[data-ic]{ display:inline-flex; align-items:center; font-style:normal; }