/* diag.css
   Diagnóstico Estratégico Logístico (AI&A)
   - Diseñado para convivir con tu CSS principal.
   - Usa tus variables si existen; incluye fallbacks.
*/

/* Reutiliza la paleta del sitio si existen estas variables.
   Si tu :root ya define --bg/--text/--muted/--line/--r/--shadow-mid, esto calza perfecto. */
:root{
  --aia-bg: var(--bg, #ffffff);
  --aia-text: var(--text, #0b0f14);
  --aia-muted: var(--muted, rgba(11,15,20,.62));
  --aia-line: var(--line, rgba(11,15,20,.10));
  --aia-line-2: rgba(11,15,20,.14);
  --aia-shadow: var(--shadow-mid, 0 10px 30px rgba(0,0,0,.06));
  --aia-r: var(--r, 18px);
  --aia-r2: 999px;
}

/* Si tu sitio ya define font-family en body, se hereda. */
.aia-diag{
  background: var(--aia-bg);
  color: var(--aia-text);
  padding: 56px 16px;
  border-top: 1px solid var(--aia-line);
}

.aia-diag__wrap{max-width: 980px; margin: 0 auto;}
.aia-diag__head{margin-bottom: 18px;}
.aia-kicker{
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--aia-muted);
  margin: 0 0 8px;
}
.aia-h2{
  margin: 0;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: -.02em;
}
.aia-h3{
  margin: 6px 0 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.aia-sub{color: var(--aia-muted); margin: 8px 0 0; max-width: 60ch;}

.aia-card{
  border: 1px solid var(--aia-line);
  border-radius: var(--aia-r);
  padding: 18px;
  box-shadow: var(--aia-shadow);
  background: #fff;
}

.aia-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.aia-progress{flex:1; height:8px; background: rgba(11,15,20,.08); border-radius: var(--aia-r2); overflow:hidden;}
.aia-bar{height:100%; width:0%; background: var(--aia-text); border-radius: var(--aia-r2); transition: width .25s ease;}
.aia-step{font-size:13px; color: var(--aia-muted);}

.aia-q{font-size:18px; font-weight:600; margin:12px 0 10px; letter-spacing:-.01em;}
.aia-opts{display:grid; gap:10px;}

.aia-opt{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--aia-line-2);
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
  background:#fff;
}
.aia-opt:hover{transform: translateY(-1px); border-color: rgba(11,15,20,.22);}
.aia-opt input{margin-top:2px;}

/* Multi-select (checkbox) visual parity */
.aia-opt input[type="checkbox"]{width:16px; height:16px;}

.aia-opt.is-selected{
  border-color: rgba(11,15,20,.28);
  background: rgba(11,15,20,.02);
}

.aia-opt.is-disabled{
  opacity: .55;
  cursor: not-allowed;
}
.aia-opt .t{font-weight:600;}
.aia-opt .s{font-size:13px; color: var(--aia-muted); margin-top:2px;}

.aia-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; justify-content:flex-end;}
.aia-btn{
  appearance:none;
  border:1px solid var(--aia-line-2);
  background: var(--aia-text);
  color:#fff;
  border-radius: var(--aia-r2);
  padding:11px 14px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .08s ease, opacity .12s ease, background .12s ease;
}
.aia-btn:hover{transform: translateY(-1px);}
.aia-btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.aia-btn.ghost{background:#fff; color: var(--aia-text);}

.aia-footnote{margin-top:10px; font-size:12px; color: var(--aia-muted);}
.aia-result{margin-top:16px;}

.aia-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0;}
.aia-m{border:1px solid var(--aia-line); border-radius:14px; padding:10px;}
.aia-m__label{font-size:12px; color: var(--aia-muted);}
.aia-m__value{font-size:16px; font-weight:700; margin-top:4px; letter-spacing:-.01em;}

.aia-insight{border-left:3px solid rgba(11,15,20,.20); padding-left:12px; margin:12px 0; color: rgba(11,15,20,.88);}
.aia-insight p{margin:6px 0;}
.aia-insight ul{margin:8px 0 0 18px; padding:0;}
.aia-insight li{margin:6px 0;}

.aia-reco{border:1px dashed rgba(11,15,20,.18); border-radius:14px; padding:12px; margin:12px 0;}
.aia-reco__label{font-size:12px; color: var(--aia-muted); margin-bottom:6px;}
.aia-reco__text{font-weight:600;}

.aia-ctas{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.aia-tech{margin-top:12px;}
.aia-tech summary{cursor:pointer; color: var(--aia-muted);}
.aia-tech pre{
  white-space:pre-wrap;
  background: rgba(11,15,20,.04);
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(11,15,20,.08);
}

@media (max-width:720px){
  .aia-metrics{grid-template-columns:1fr;}
  .aia-h2{font-size:24px;}
}


/* Hint line under subtitle */
.aia-sub--hint{
  opacity:.78;
  font-size:0.98rem;
}

/* Inline back button next to question */
.aia-q-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.aia-back-inline{
  margin-left:auto;
  align-self:flex-start;
  white-space:nowrap;
}

/* WhatsApp CTA uses site accent (green) */
#rCTA{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}
#rCTA:hover{ filter: brightness(.95); }


/* Intro screen */
.aia-intro{ margin-top:18px; }
.aia-mini{ margin-top:10px; opacity:.85; }

/* Extra note / textarea (captura sutil de contexto adicional) */
.aia-more{ margin-top:14px; }
.aia-more__label{ display:block; font-weight:600; margin-bottom:8px; letter-spacing:-.01em; }
.aia-more__textarea{
  font-size:17px;

  width: 100%;
  resize: vertical;
  min-height: 96px;
  border-radius: 14px;
  border: 1px solid rgba(11,15,20,.14);
  padding: 12px;
  background: rgba(11,15,20,.02);
  color: rgba(11,15,20,.88);
  outline: none;
}
.aia-more__textarea:focus{ border-color: rgba(11,15,20,.28); background:#fff; }
.aia-more__hint{ margin:8px 0 0; font-size:17px; color: var(--aia-muted); }

/* Inline back button next to question */
.aia-q-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.aia-back-inline{
  margin-left:auto;
  align-self:flex-start;
  white-space:nowrap;
}

/* WhatsApp CTA uses site accent (green) */
#rCTA{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}
#rCTA:hover{ filter: brightness(.95); }


/* CTA button behaviors (hover turns green, default only WhatsApp is green) */
.aia-ctas .aia-btn{
  font-size: 1rem; /* ensure same size */
}

/* Default: only WhatsApp is green */
#rCTA{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}

/* Secondary buttons: neutral by default */
#rEmail, #diagHome{
  background: transparent;
  border-color: rgba(11,15,20,.18);
  color: rgba(11,15,20,.78);
}

/* Hover: make them green like WhatsApp */
#rEmail:hover, #diagHome:hover{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}

/* When not hovering, they return to neutral automatically (by default styles above). */


/* Header row with timer */
.aia-headrow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}
.aia-timer{
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  padding: 6px 10px;
  border: 1px solid rgba(11,15,20,.12);
  border-radius: 999px;
  background: rgba(11,15,20,.03);
  color: rgba(11,15,20,.72);
  min-width: 84px;
  text-align: center;
}
.aia-timer.is-danger{
  background: rgba(127,29,29,.10);
  border-color: rgba(127,29,29,.28);
  color: rgba(127,29,29,.92);
}
@keyframes aiaBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .25; }
}
.aia-timer.is-zero{
  animation: aiaBlink 1s steps(1, end) infinite;
}

/* Align option radio controls with text */
.aia-opt{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.aia-opt input[type="radio"]{
  margin-top: 4px;
  flex: 0 0 auto;
}
.aia-opt > div{
  flex: 1 1 auto;
}

/* Neon yellow highlight for suggested recommendation card */
.aia-reco--highlight{
  background: rgba(234, 255, 0, .10);
  border: 1px solid rgba(234, 255, 0, .28);
  box-shadow: 0 0 0 2px rgba(234, 255, 0, .06) inset;
  border-radius: 14px;
  padding: 14px 14px 12px;
}

/* When hovering other CTAs, WhatsApp button becomes neutral */
.aia-ctas:hover #rCTA{
  background: transparent;
  border-color: rgba(11,15,20,.18);
  color: rgba(11,15,20,.78);
}
/* But if hovering WhatsApp itself, keep it green */
.aia-ctas:hover #rCTA:hover{
  background: var(--accent);
  border-color: var(--accent);
  color:#fff;
}

/* Center radio with the bold title line */
.aia-opt{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.aia-opt__mark{
  width:18px;
  height: calc(1.25em + 2px); /* matches .t line-height */
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.aia-opt__mark input[type="radio"]{
  margin: 0;
}
/* ensure title line-height predictable */
.aia-opt .t{
  font-weight: 600;
  line-height: 1.25;
}

/* Icon buttons */

/* Ensure icon-only buttons are square-ish and centered */
#rCTA, #rEmail{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width: 48px;
  padding-left: 14px;
  padding-right: 14px;
}
/* Visually hidden (accessible) */


/* Ensure SVG icons always render consistently */




/* Priorización (resultado) */
.aia-priorities{
  margin-top: 14px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(11,15,20,.02);
}
.aia-priorities__label{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.aia-priorities__list{
  margin: 0;
  padding-left: 18px;
}
.aia-priorities__list li{
  margin: 8px 0;
}
.aia-pri__title{
  display: inline-block;
  font-weight: 650;
}
.aia-pri__desc{
  display: block;
  color: var(--muted);
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.35;
}

/* Legibilidad textarea final */
.aia-more__textarea{
  font-size: 17px;
  line-height: 1.45;
  min-height: 140px;
}

/* iOS: eliminar tap highlight en opciones y botones */
.aia-btn, .aia-opt, .aia-tech summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}