/* ==========================================================
   Diagnóstico de Marketing Digital · Impactiq
   Sistema visual heredado del tema impactiq-theme
   ========================================================== */

/* Los tokens van en .iq-diag y no en :root a proposito: el tema de Impactiq
   define --magenta, --noche, --sobre-noche y --magenta-noche con otros valores.
   En :root, el ultimo en cargar gana y cambia el color del resto de la pagina. */
.iq-diag{
  /* --- superficies (papel roto, no blanco puro) --- */
  --papel:      #faf7f5;
  --papel-2:    #f2ecee;
  --papel-3:    #e7dfe3;
  --tinta:      #141018;
  --tinta-2:    #4a414c;
  --tinta-3:    #6e6169;      /* neutro con sesgo magenta, no gris puro */
  --borde:      #ddd2d7;

  /* --- marca --- */
  --magenta:      #c4006e;    /* texto de marca: AA sobre papel */
  --magenta-vivo: #fd058d;    /* superficies y decoración */
  --magenta-boton:#e0007d;    /* fondo de botón con texto blanco: 4,7:1 */
  --magenta-suave:#fdeaf4;

  /* --- fijos: no se invierten con el tema --- */
  --noche:        #191016;
  --sobre-noche:  #fbf7f9;
  --magenta-noche:#ff4da6;

  /* --- semánticos, independientes del acento --- */
  --bien:   #0f7a5a;
  --bien-f: #e4f3ed;
  --medio:  #9a5c00;
  --medio-f:#fbf0dc;
  --mal:    #b5271f;
  --mal-f:  #fbe9e7;

  --sombra: 0 1px 2px rgba(20,16,24,.05), 0 8px 24px -12px rgba(20,16,24,.18);
  --radio: 10px;
  --paso: clamp(1rem, 2.5vw, 1.75rem);

  --display: 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif;
  --cuerpo:  'Josefin Sans', 'Segoe UI', system-ui, sans-serif;
  --mano:    'Caveat', 'Bradley Hand', cursive;
  --dato:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .iq-diag{
    --papel:#15111a; --papel-2:#1e1823; --papel-3:#2a2231;
    --tinta:#f6f1f4; --tinta-2:#c3b8c1; --tinta-3:#9d90a0;
    --borde:#382e40;
    --magenta:#ff6bb4; --magenta-suave:#33132a;
    --bien:#4cc79a; --bien-f:#102b22;
    --medio:#e0a44a; --medio-f:#312413;
    --mal:#ff7a6e;  --mal-f:#331714;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] .iq-diag{
  --papel:#15111a; --papel-2:#1e1823; --papel-3:#2a2231;
  --tinta:#f6f1f4; --tinta-2:#c3b8c1; --tinta-3:#9d90a0;
  --borde:#382e40;
  --magenta:#ff6bb4; --magenta-suave:#33132a;
  --bien:#4cc79a; --bien-f:#102b22;
  --medio:#e0a44a; --medio-f:#312413;
  --mal:#ff7a6e;  --mal-f:#331714;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

.iq-diag,.iq-diag *,.iq-diag *::before,.iq-diag *::after{ box-sizing:border-box; }
.iq-diag{
  font-family:var(--cuerpo);
  color:var(--tinta);
  background:var(--papel);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.iq-diag :focus-visible{ outline:3px solid var(--magenta-boton); outline-offset:2px; border-radius:4px; }
.iq-diag h1,.iq-diag h2,.iq-diag h3{ font-family:var(--display); font-weight:500; letter-spacing:-.015em; text-wrap:balance; margin:0; }
.iq-diag h1{ font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.08; }
.iq-diag h2, .iq-diag h1.iq-t2{ font-size:clamp(1.35rem,2.6vw,1.85rem); line-height:1.15; }
.iq-diag h3{ font-size:1.08rem; font-weight:600; }
.iq-diag p{ margin:0; }
.iq-envoltura{ max-width:1060px; margin-inline:auto; padding:var(--paso); }

/* --- etiquetas de sección --- */
.iq-eyebrow{
  font-family:var(--dato); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--tinta-3); display:block; margin-bottom:.6rem;
}
.iq-mano{ font-family:var(--mano); font-size:1.5rem; color:var(--magenta); line-height:1; }

/* --- botones (formato boostiqapp: flecha desnuda, sin círculo) --- */
.iq-btn{
  --bg:var(--magenta-boton); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--bg); color:var(--fg);
  font-family:var(--display); font-weight:500; font-size:1rem;
  border:none; border-radius:100px; padding:.85rem 1.6rem;
  cursor:pointer; text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .2s;
}
.iq-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -10px var(--magenta-vivo); }
.iq-btn:active{ transform:translateY(0); }
.iq-btn .f{ transition:transform .25s cubic-bezier(.2,.8,.3,1); }
.iq-btn:hover .f{ transform:translateX(4px); }
.iq-btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.iq-btn--fantasma{ --bg:transparent; --fg:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--borde); }
.iq-btn--fantasma:hover{ box-shadow:inset 0 0 0 1.5px var(--magenta); }

/* --- cabecera del paso --- */
.iq-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }

/* --- barra de progreso --- */
.iq-progreso{ height:4px; background:var(--papel-3); border-radius:99px; overflow:hidden; }
.iq-progreso i{ display:block; height:100%; background:var(--magenta-vivo); border-radius:99px; transition:width .35s ease; }
.iq-progreso-txt{ font-family:var(--dato); font-size:.72rem; color:var(--tinta-3); letter-spacing:.06em; }

.iq-garantias{
  list-style:none; margin:0 0 1.75rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem .5rem;
}
.iq-garantias li{
  font-family:var(--dato); font-size:.72rem; letter-spacing:.04em;
  color:var(--magenta); background:var(--magenta-suave);
  border-radius:99px; padding:.35rem .75rem;
  display:flex; align-items:center; gap:.4rem;
}
.iq-garantias li::before{ content:'✓'; font-weight:700; }

/* --- formulario de entrada --- */
.iq-campo{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.iq-campo label{ font-size:.85rem; font-weight:600; color:var(--tinta-2); }
.iq-campo input, .iq-campo select{
  font-family:var(--cuerpo); font-size:1rem; color:var(--tinta);
  background:var(--papel); border:1.5px solid var(--borde); border-radius:var(--radio);
  padding:.75rem .9rem; width:100%;
}
.iq-campo input:focus{ border-color:var(--magenta); }
.iq-pista{ font-size:.8rem; color:var(--tinta-3); }
.iq-error{ color:var(--mal); font-size:.85rem; font-weight:600; }

/* --- preguntas --- */
.iq-pregunta{ margin-bottom:2rem; }
.iq-pregunta legend{ font-family:var(--display); font-weight:500; font-size:1.15rem; line-height:1.3; margin-bottom:.9rem; padding:0; }
.iq-ops{ display:grid; gap:.5rem; }
.iq-op{
  display:flex; align-items:flex-start; gap:.75rem;
  border:1.5px solid var(--borde); border-radius:var(--radio);
  padding:.8rem 1rem; cursor:pointer; background:var(--papel);
  transition:border-color .15s, background .15s;
}
.iq-op:hover{ border-color:var(--magenta); }
.iq-op input{ margin:.25rem 0 0; accent-color:var(--magenta-boton); flex:none; }
.iq-op:has(input:checked){ border-color:var(--magenta); background:var(--magenta-suave); }
.iq-op span{ font-size:.97rem; }

/* --- rejilla de áreas en el resultado --- */
.iq-areas{ display:grid; gap:.5rem; }
.iq-area{
  display:grid; grid-template-columns:4px 2rem 1fr auto; align-items:center; gap:.9rem;
  padding:.85rem 1rem .85rem 0; border-bottom:1px solid var(--borde);
}
.iq-area:last-child{ border-bottom:none; }
.iq-area .franja{ align-self:stretch; border-radius:99px; background:var(--tinta-3); }
.iq-area.n-critico .franja,.iq-area.n-inicial .franja{ background:var(--mal); }
.iq-area.n-desarrollo .franja{ background:var(--medio); }
.iq-area.n-consolidado .franja,.iq-area.n-avanzado .franja{ background:var(--bien); }
.iq-area .ico{ font-size:1.1rem; text-align:center; color:var(--tinta-3); }
.iq-area .nom{ font-family:var(--display); font-weight:500; }
.iq-area .que{ font-size:.83rem; color:var(--tinta-3); display:block; }
.iq-area .nota{ font-family:var(--display); font-weight:600; font-size:1.35rem; font-variant-numeric:tabular-nums; }
.iq-area.excl .nota{ font-size:.8rem; font-weight:500; color:var(--tinta-3); font-family:var(--cuerpo); }

/* --- píldoras de estado --- */
.iq-pill{
  display:inline-block; font-family:var(--dato); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.1em; padding:.28rem .6rem; border-radius:99px; white-space:nowrap;
}
.p-bien{ background:var(--bien-f); color:var(--bien); }
.p-medio{ background:var(--medio-f); color:var(--medio); }
.p-mal{ background:var(--mal-f); color:var(--mal); }
.p-neutro{ background:var(--papel-3); color:var(--tinta-2); }
.iq-pill-enlace{ background:var(--magenta-suave); color:var(--magenta); text-decoration:none;
  box-shadow:inset 0 0 0 1px currentColor; transition:background .15s; }
.iq-pill-enlace:hover{ background:var(--magenta); color:#fff; }

/* --- termómetro global --- */
.iq-global{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,4vw,2.5rem); align-items:center;
  background:var(--noche); color:var(--sobre-noche);
  border-radius:16px; padding:clamp(1.25rem,3vw,2rem);
}
.iq-global .cifra{ font-family:var(--display); font-weight:600; font-size:clamp(3.4rem,10vw,5rem); line-height:.9; color:var(--magenta-noche); font-variant-numeric:tabular-nums; }
.iq-global .de{ font-size:.85rem; color:#b9adb6; font-family:var(--dato); }
.iq-global h2{ color:var(--sobre-noche); }
.iq-global p{ color:#cfc4cc; }

/* --- bloques del informe --- */
.iq-bloque{ margin-top:2.5rem; }
.iq-lista{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.iq-lista li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.95rem; }
.iq-lista .m{ flex:none; font-weight:700; line-height:1.5; }
.iq-lista .ok .m{ color:var(--bien); }
.iq-lista .ko .m{ color:var(--mal); }

/* --- plan de acción --- */
.iq-accion{
  display:grid; grid-template-columns:auto 1fr; gap:1rem;
  padding:1.1rem 0; border-top:1px solid var(--borde);
}
.iq-accion .orden{ font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--magenta); font-variant-numeric:tabular-nums; line-height:1; }
.iq-accion h3{ margin-bottom:.3rem; }
.iq-accion p{ font-size:.93rem; color:var(--tinta-2); }
.iq-meta{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.55rem; align-items:center; }

/* --- puerta de email --- */
.iq-puerta{
  border:2px dashed var(--magenta); border-radius:16px;
  padding:clamp(1.25rem,3vw,2rem); background:var(--magenta-suave);
}
.iq-consent{ display:flex; gap:.65rem; align-items:flex-start; font-size:.85rem; color:var(--tinta-2); margin-bottom:.75rem; }
.iq-consent input{ margin-top:.2rem; flex:none; accent-color:var(--magenta-boton); }
.iq-consent a{ color:var(--magenta); }

/* --- avisos honestos --- */
.iq-nota{
  border-left:3px solid var(--borde); padding:.6rem 0 .6rem .9rem;
  font-size:.85rem; color:var(--tinta-3); margin-top:1rem;
}
.iq-demo{
  background:var(--medio-f); color:var(--medio); border:1.5px solid currentColor;
  border-radius:var(--radio); padding:.7rem 1rem; font-size:.85rem; font-weight:600; margin-bottom:1.25rem;
}

/* --- cargando --- */
.iq-cargando{ display:grid; gap:.6rem; padding:2rem 0; }
.iq-cargando .l{ display:flex; gap:.7rem; align-items:center; font-size:.92rem; color:var(--tinta-2); }
.iq-cargando .l .m{ color:var(--bien); font-weight:700; }
@keyframes iq-lat{ 0%,100%{opacity:.35} 50%{opacity:1} }
.iq-cargando .l.act{ animation:iq-lat 1s ease-in-out infinite; }

.iq-tabla-envoltura{ overflow-x:auto; }
.iq-oculto{ display:none !important; }
.iq-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width:640px){
  .iq-global{ grid-template-columns:1fr; text-align:left; }
  .iq-area{ grid-template-columns:4px 1fr auto; }
  .iq-area .ico{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .iq-diag *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
@media print{
  .iq-no-print{ display:none !important; }
  .iq-diag{ background:#fff; color:#000; }
  .iq-global{ background:#fff; color:#000; border:2px solid #000; }
  .iq-global .cifra,.iq-global h2,.iq-global p{ color:#000; }
  .iq-accion{ break-inside:avoid; }
}