/* Diagnóstico profesional · extensión visual del sistema NEXO Studio. */
.page-diagnostico [hidden] { display: none !important; }
.page-diagnostico main { background: #080c12; }

.diagnostic-hero {
  position: relative;
  overflow: hidden;
  padding: 136px 0 56px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 78% 2%, #1f8fff1c, transparent 46%),
    radial-gradient(ellipse at 18% 100%, #7b2eff12, transparent 42%),
    #090c12;
}
.diagnostic-hero::after {
  position: absolute;
  inset: auto -8% -1px 42%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, #27d9ff7a, transparent);
}
.diagnostic-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .7fr);
  align-items: center;
  gap: clamp(40px, 7vw, 88px);
}
.diagnostic-hero-copy { min-width: 0; }
.diagnostic-hero .eyebrow { margin-bottom: 14px; font-size: .6875rem; }
.diagnostic-hero h1 {
  max-width: 730px;
  margin: 0;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.08;
}
.diagnostic-hero-copy > p:not(.eyebrow) {
  max-width: 680px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}
.diagnostic-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.diagnostic-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid #34435b;
  border-radius: 999px;
  color: #c4d0e2;
  background: #101722;
  font-size: .75rem;
}
.diagnostic-meta i { color: #55caff; }
.diagnostic-hero-panel {
  padding: 24px;
  border: 1px solid #304463;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #132033, #0b1019);
  box-shadow: inset 0 1px #ffffff0d, 0 22px 50px #00000024;
}
.diagnostic-hero-panel-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.diagnostic-hero-panel-heading .card-icon { flex: 0 0 44px; }
.diagnostic-hero-panel-heading div:last-child { display: grid; gap: 2px; }
.diagnostic-hero-panel-heading span {
  color: var(--cyan);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.diagnostic-hero-panel-heading strong { font-size: 1rem; }
.diagnostic-hero-panel ul { display: grid; gap: 0; margin: 8px 0 0; list-style: none; }
.diagnostic-hero-panel li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #ffffff0b;
}
.diagnostic-hero-panel li:last-child { padding-bottom: 0; border-bottom: 0; }
.diagnostic-hero-panel li > span { padding-top: 2px; color: #6da9d9; font: 700 .6875rem "Space Grotesk", sans-serif; }
.diagnostic-hero-panel li p { color: #9eabc0; font-size: .75rem; line-height: 1.55; }
.diagnostic-hero-panel li strong { display: block; margin-bottom: 2px; color: #eaf1fd; font-size: .8125rem; }

.diagnostic-workspace {
  padding: 48px 0 80px;
  background: radial-gradient(circle at 76% 10%, #1f8fff0b, transparent 28rem), #080c12;
}
#diagnostic-loading { min-height: 260px; padding: 40px 0; color: var(--muted); }
.diagnostic-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.diagnostic-sidebar {
  position: sticky;
  top: 104px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #10151e, #0b0e14);
  box-shadow: inset 0 1px #ffffff05;
}
.diagnostic-sidebar-heading { margin-bottom: 20px; }
.diagnostic-sidebar-heading .eyebrow { margin: 0 0 5px; font-size: .6875rem; }
.diagnostic-sidebar-heading > strong { font-size: .9375rem; }
.diagnostic-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #aab4c6; font-size: .75rem; }
.diagnostic-progress-label strong { color: #eaf3ff; font-size: .8125rem; }
.diagnostic-sidebar progress {
  width: 100%;
  height: 6px;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #243047;
  accent-color: var(--cyan);
}
.diagnostic-sidebar progress::-webkit-progress-bar { background: #243047; }
.diagnostic-sidebar progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.diagnostic-sidebar progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.diagnostic-steps { display: grid; gap: 5px; margin: 22px 0; }
.diagnostic-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #9eabc0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.diagnostic-step:hover { color: #e8f1ff; background: #121a27; }
.diagnostic-step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #374760;
  border-radius: 9px;
  color: #a7b5cb;
  background: #0a1019;
  font: 700 .6875rem "Space Grotesk", sans-serif;
}
.diagnostic-step-label { overflow: hidden; font-size: .8125rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.diagnostic-step-count { color: #74839a; font-size: .6875rem; }
.diagnostic-step[aria-current="step"] { border-color: #356299; color: #eaf5ff; background: linear-gradient(110deg, #173250, #182440); }
.diagnostic-step[aria-current="step"] .diagnostic-step-number { border-color: #56aee9; color: #07111c; background: #69ceff; }
.diagnostic-step.is-complete .diagnostic-step-number { border-color: #34735f; color: #7ce5ba; background: #10261f; }
.diagnostic-sidebar .btn { width: 100%; }
.diagnostic-sidebar .btn.is-active {
  color: #eaf5ff;
  border-color: #477cad;
  background: #172943;
}
.diagnostic-sidebar-note { display: flex; gap: 9px; margin-top: 16px; color: #8190a6; font-size: .6875rem; line-height: 1.55; }
.diagnostic-sidebar-note i { margin-top: 3px; color: #70a6d2; }

.diagnostic-card {
  min-width: 0;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid #2e3a4d;
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #101722, #0b0f16);
  box-shadow: inset 0 1px #ffffff06, 0 24px 60px #0000001f;
}
.diagnostic-card::before {
  display: block;
  width: 72px;
  height: 2px;
  margin: calc(clamp(24px, 4vw, 42px) * -1) 0 clamp(24px, 4vw, 34px);
  content: "";
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  box-shadow: 0 0 20px #27d9ff40;
}
.diagnostic-section-heading { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
.diagnostic-section-number {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #365a82;
  border-radius: 14px;
  color: #8ed9ff;
  background: linear-gradient(145deg, #17324e, #121b2d);
  font: 700 .8125rem "Space Grotesk", sans-serif;
}
.diagnostic-kicker { margin: 0 0 6px; color: #6ebdec; font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.diagnostic-card h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.15; }
.diagnostic-description { max-width: 720px; margin: 12px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.65; }
.diagnostic-fields { display: grid; gap: 0; margin-top: 30px; }
.diagnostic-field { min-width: 0; margin: 0; padding: 22px 0; border: 0; border-top: 1px solid var(--line); }
.diagnostic-field > label,
.diagnostic-field legend { display: block; width: 100%; margin-bottom: 10px; color: #eef4ff; font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.diagnostic-field input:not([type="checkbox"]),
.diagnostic-field textarea,
.diagnostic-field select {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid #39485e;
  border-radius: 10px;
  color: #eef4ff;
  background: #080d15;
  box-shadow: inset 0 1px 0 #ffffff05;
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.diagnostic-field textarea { min-height: 118px; line-height: 1.6; resize: vertical; }
.diagnostic-field input::placeholder,
.diagnostic-field textarea::placeholder { color: #75839a; opacity: 1; }
.diagnostic-field :is(input, textarea, select):hover { border-color: #51617a; }
.diagnostic-field :is(input, textarea, select):focus { outline: 0; border-color: #5db9f0; background: #0a111c; box-shadow: 0 0 0 3px #1f8fff1f; }
.diagnostic-hint { margin: -3px 0 11px; color: #8f9db1; font-size: .75rem; }
.diagnostic-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.diagnostic-option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid #354257;
  border-radius: 11px;
  color: #c2ccdb;
  background: #0a0f17;
  font-size: .875rem;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
}
.diagnostic-option:hover { color: #fff; border-color: #50627c; transform: translateY(-1px); }
.diagnostic-option:has(input:checked) { color: #e8f6ff; border-color: #4e8fc5; background: linear-gradient(110deg, #142c45, #151f35); }
.diagnostic-option input,
.diagnostic-save input { flex: 0 0 19px; width: 19px; height: 19px; accent-color: #329ef2; }
.diagnostic-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.page-diagnostico .btn { font-size: .8125rem; }
.diagnostic-storage {
  grid-column: 2;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #8795a9;
  background: #0b1018;
  font-size: .75rem;
  line-height: 1.6;
}
.diagnostic-save { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; color: #cad5e5; font-size: .8125rem; cursor: pointer; }
.diagnostic-utility { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.diagnostic-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #354359;
  border-radius: 9px;
  color: #a9dfff;
  background: #101722;
  font: inherit;
  font-size: .75rem;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.diagnostic-link:hover { color: #fff; border-color: #52779c; background: #162234; }
.diagnostic-status { margin-top: 12px; color: #afd8f5; font-size: .75rem; }

.diagnostic-review-section { padding: 24px 0; border-top: 1px solid var(--line); }
.diagnostic-review-section:first-child { margin-top: 28px; }
.diagnostic-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.diagnostic-review-heading h3 { font-size: 1.0625rem; }
.diagnostic-review-heading .diagnostic-link { min-height: 36px; padding: 6px 12px; }
.diagnostic-review-section dl { display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr); gap: 0 24px; }
.diagnostic-review-section dt,
.diagnostic-review-section dd { padding: 11px 0; border-top: 1px solid #ffffff0a; }
.diagnostic-review-section dt { color: #91a0b5; font-size: .75rem; }
.diagnostic-review-section dd { margin: 0; color: #dce5f2; font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.diagnostic-pending { color: #e8bc72 !important; font-style: italic; }
.diagnostic-send {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #32755f;
  border-radius: 16px;
  background: linear-gradient(135deg, #112b24, #0d1c1a);
}
.diagnostic-send::after { position: absolute; inset: -70px -55px auto auto; width: 150px; height: 150px; border-radius: 50%; background: #2bd47d0d; content: ""; }
.diagnostic-send h3 { position: relative; font-size: 1.125rem; }
.diagnostic-send p { position: relative; max-width: 780px; margin: 9px 0 15px; color: #adc5bd; font-size: .8125rem; }
.diagnostic-send-links { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.diagnostic-send .btn.primary { border-color: #4c9b73; background: #16623f; box-shadow: 0 4px 18px #072b1b52; }
.diagnostic-send .btn.primary:hover { background: #1b754b; }
.diagnostic-copy-fallback { width: 100%; min-height: 160px; margin-top: 12px; padding: 14px; border: 1px solid #41506a; border-radius: 10px; color: white; background: #080d15; font: inherit; }

@media (max-width: 1023px) {
  .diagnostic-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr); gap: 32px; }
  .diagnostic-layout { grid-template-columns: 244px minmax(0, 1fr); }
  .diagnostic-step { grid-template-columns: 30px minmax(0, 1fr); }
  .diagnostic-step-count { display: none; }
}
@media (max-width: 767px) {
  .diagnostic-hero { padding: calc(104px + env(safe-area-inset-top)) 0 36px; }
  .diagnostic-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .diagnostic-hero h1 { font-size: clamp(2.15rem, 9vw, 3rem); }
  .diagnostic-hero-copy > p:not(.eyebrow) { margin-top: 16px; font-size: .875rem; }
  .diagnostic-hero-panel { padding: 20px; }
  .diagnostic-workspace { padding: 24px 0 64px; }
  .diagnostic-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .diagnostic-sidebar { position: static; padding: 18px; }
  .diagnostic-sidebar-heading { margin-bottom: 14px; }
  .diagnostic-steps { display: flex; gap: 7px; margin: 16px -2px 18px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .diagnostic-step { flex: 0 0 150px; grid-template-columns: 30px minmax(0, 1fr); scroll-snap-align: start; }
  .diagnostic-step-count { display: none; }
  .diagnostic-sidebar-note { display: none; }
  .diagnostic-card { padding: 24px 20px; border-radius: 20px; }
  .diagnostic-card::before { margin: -24px 0 24px; }
  .diagnostic-section-heading { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; }
  .diagnostic-section-number { width: 42px; height: 42px; border-radius: 12px; }
  .diagnostic-card h2 { font-size: 1.65rem; }
  .diagnostic-description { font-size: .8125rem; }
  .diagnostic-fields { margin-top: 24px; }
  .diagnostic-field { padding: 19px 0; }
  .diagnostic-options { grid-template-columns: minmax(0, 1fr); }
  .diagnostic-storage { grid-column: 1; padding: 17px 18px; }
  .diagnostic-review-section dl { grid-template-columns: minmax(0, 1fr); }
  .diagnostic-review-section dt { padding-bottom: 3px; }
  .diagnostic-review-section dd { padding-top: 3px; border-top: 0; }
}
@media (max-width: 479px) {
  .diagnostic-layout.container,
  .diagnostic-hero .container { width: calc(100% - 32px); }
  .diagnostic-meta { align-items: stretch; }
  .diagnostic-meta span { flex: 1 1 calc(50% - 8px); }
  .diagnostic-hero-panel li { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .diagnostic-actions { flex-wrap: wrap; }
  .diagnostic-actions .btn { flex: 1 1 120px; }
  .diagnostic-send { padding: 18px; }
  .diagnostic-send-links .btn { width: 100%; }
  .diagnostic-utility { align-items: stretch; }
  .diagnostic-utility .diagnostic-link { flex: 1 1 150px; }
}
@media (hover: none) and (pointer: coarse) {
  .diagnostic-option:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .diagnostic-step,
  .diagnostic-option,
  .diagnostic-link { transition: none; }
}