/* ============================================================
   GESTIÓN INTELIGENTE — /diagnostico
   Depende de tokens.css + app.css. Solo lo propio de esta página.
   ============================================================ */

body.diag { padding-bottom: calc(var(--sp-16) + env(safe-area-inset-bottom)); }
@media (min-width: 860px) { body.diag { padding-bottom: 0; } }

/* el botón "Ir al sitio" del header se ve siempre, no solo en desktop */
.nav-volver { display: inline-flex; min-height: 42px; padding: 0 var(--sp-4); font-size: var(--step--1); }

.diag-wrap { padding-block: var(--sp-12); }
@media (min-width: 860px) { .diag-wrap { padding-block: var(--sp-16); } }
.diag-wrap .lead { max-width: 52ch; margin-bottom: var(--sp-8); }
.diag-wrap > .wrap { max-width: 760px; }

/* ─────────── formulario ─────────── */

.diag-form { display: grid; gap: var(--sp-6); }
.diag-form .q { display: grid; gap: var(--sp-2); margin: 0; }
.diag-form .lbl {
  font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mut); margin: 0;
}
.diag-form select,
.diag-form input,
.diag-form textarea {
  width: 100%; min-height: 52px; padding: var(--sp-3) var(--sp-4);
  background: var(--bg); border: 1px solid var(--outline); border-radius: var(--r-sm);
  color: var(--text); font-family: inherit; font-size: 16px; line-height: 1.4;
}
.diag-form textarea { min-height: 84px; resize: vertical; }
.diag-form select:focus,
.diag-form input:focus,
.diag-form textarea:focus {
  border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px;
}
.diag-form .hint { font-size: var(--step--2); color: var(--text-mut); }
.diag-form .err { display: none; color: var(--warn); font-size: var(--step--2); }
.diag-form .q.invalid select,
.diag-form .q.invalid input,
.diag-form .q.invalid textarea { border-color: var(--warn); }
.diag-form .q.invalid .err { display: block; }

#ts-widget:not(:empty) { margin-top: var(--sp-2); }

.diag-error {
  margin-top: var(--sp-3); padding: var(--sp-4);
  border: 1px solid var(--warn); border-radius: var(--r-sm);
  background: rgba(242, 107, 58, .08); color: var(--text); font-size: var(--step--1);
}

/* honeypot: fuera de la pantalla, invisible para gente y lectores de pantalla */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─────────── informe ─────────── */

.diag-informe { margin-top: var(--sp-16); scroll-margin-top: 84px; }
.diag-informe .eyebrow { margin-bottom: var(--sp-4); }
#inf-horas-titulo { margin-bottom: var(--sp-2); }
.inf-sub { color: var(--text-mut); font-size: var(--step-1); font-weight: 200; margin-bottom: var(--sp-8); text-wrap: pretty; }

.diag-calc { margin-top: 0; }
.diag-calc .lbl {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mut); margin-bottom: var(--sp-3);
}
.diag-calc .calc-val b { font-size: var(--step-2); }
.diag-calc .calc-val .mono { font-size: var(--step--2); }

.diag-disclaimer {
  margin-top: var(--sp-4); font-size: var(--step--2); color: var(--text-mut);
  line-height: 1.6; max-width: 60ch;
}

.inf-h3 { font-size: var(--step-1); margin: var(--sp-12) 0 var(--sp-5); letter-spacing: -.03em; }

.inf-tareas { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .inf-tareas { grid-template-columns: 1fr 1fr; }
  .inf-tarea.principal { grid-column: 1 / -1; } }
.inf-tarea {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  padding: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start;
}
.inf-tarea.principal {
  border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient-iris) border-box;
}
.inf-tarea h4 { font-size: var(--step-0); letter-spacing: -.02em; margin: 0; }
.inf-como { font-size: var(--step--1); color: var(--text); line-height: 1.55; margin: 0; }
.inf-medir { font-size: var(--step--2); color: var(--text-mut); line-height: 1.5; margin: 0; }
.inf-medir .mono { color: var(--accent); font-size: .58rem; }

.inf-empezar {
  margin-top: var(--sp-8); padding: var(--sp-6);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: radial-gradient(90% 130% at 0% 0%, rgba(180, 230, 60, .07), transparent 55%), var(--surface);
}
.inf-empezar .mono { display: block; color: var(--accent); margin-bottom: var(--sp-2); font-size: .6rem; }
.inf-empezar p { margin: 0; font-size: var(--step-0); line-height: 1.5; text-wrap: pretty; }

.inf-nota { margin-top: var(--sp-4); font-size: var(--step--2); color: var(--text-mut); font-style: italic; }

.inf-pdf { margin-top: var(--sp-12); display: grid; gap: var(--sp-4); }
.inf-pdf > .lbl {
  font-family: "IBM Plex Mono", monospace; font-size: var(--step-0); letter-spacing: -.02em;
  text-transform: none; color: var(--text); font-weight: 700; margin: 0;
}
.inf-pdf .q { display: grid; gap: var(--sp-2); margin: 0; }
.inf-pdf .lbl:not(:first-child) { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mut); font-weight: 400; }
.inf-pdf input {
  width: 100%; min-height: 52px; padding: var(--sp-3) var(--sp-4);
  background: var(--bg); border: 1px solid var(--outline); border-radius: var(--r-sm);
  color: var(--text); font-family: inherit; font-size: 16px;
}
.inf-pdf input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.inf-pdf .err { display: none; color: var(--warn); font-size: var(--step--2); }
.inf-pdf .q.invalid input { border-color: var(--warn); }
.inf-pdf .q.invalid .err { display: block; }

.inf-gracias { margin-top: var(--sp-12); }
.inf-gracias p { color: var(--text-mut); margin: var(--sp-3) 0 var(--sp-6); font-size: var(--step--1); }
.inf-gracias-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .diag-informe, .inf-gracias { scroll-behavior: auto; }
}

/* El error del informe puede traer un link a WhatsApp (lo agrega
   diagnostico.js cuando falla la generación): que se vea como link. */
.diag-error a {
  color: var(--accent); font-weight: 600; text-underline-offset: 3px;
}