/*
 * Proyecto Isaías 10.3 — decision-first interface.
 * Poka-yoke is expressed through hierarchy, safe states and progressive detail.
 */

.fj-decision-ui-v1030 .fj-xp-content {
  display: grid;
  gap: clamp(12px, 1.5vw, 18px);
}

.fj-decision-ui-v1030 .fj-xp-content :where(h1, h2, h3, h4) {
  color: var(--fj-ink);
  text-wrap: balance;
}

.fj-decision-ui-v1030 .fj-xp-content :where(p, li, dd, small, label) {
  line-height: 1.55;
}

/* Hierarchy lives inside the real content, never in an instruction banner. */
.fj-decision-ui-v1030 .fj-xp-focus-zone {
  position: relative;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--fj-violet) 58%, var(--fj-line)) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--fj-violet) 13%, transparent), transparent 42%),
    var(--fj-surface) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--fj-violet) 14%, transparent), var(--fj-shadow-soft) !important;
}

.fj-decision-ui-v1030 .fj-xp-focus-zone::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 4px;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(180deg, var(--fj-violet), var(--fj-teal));
}

.fj-decision-ui-v1030 .fj-xp-zone-label {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1 !important;
  justify-self: start;
  align-self: start;
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 9px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--fj-violet-soft);
  color: var(--fj-violet-ink);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}

.fj-decision-ui-v1030 .fj-xp-zone-label i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fj-violet);
  color: #fff;
  font-style: normal;
}

.fj-decision-ui-v1030 .fj-xp-summary-zone {
  border-color: color-mix(in srgb, var(--fj-teal) 30%, var(--fj-line)) !important;
}

.fj-decision-ui-v1030 .fj-xp-secondary-zone {
  box-shadow: none;
}

/* Primary, secondary and dangerous actions cannot be mistaken for each other. */
.fj-decision-ui-v1030 :where(.fj-btn, button, input[type="submit"], input[type="button"]) {
  min-height: 42px;
  touch-action: manipulation;
}

.fj-decision-ui-v1030 .fj-xp-primary-action {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--fj-violet), color-mix(in srgb, var(--fj-violet) 72%, var(--fj-teal))) !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--fj-violet) 24%, transparent) !important;
}

.fj-decision-ui-v1030 .fj-xp-secondary-action:not(.is-active) {
  background: var(--fj-surface-2);
  color: var(--fj-ink-soft);
  border-color: var(--fj-line);
  box-shadow: none;
}

.fj-decision-ui-v1030 .fj-xp-danger-action {
  border-color: color-mix(in srgb, var(--fj-red) 55%, var(--fj-line)) !important;
  background: var(--fj-red-soft) !important;
  color: var(--fj-red) !important;
  box-shadow: none !important;
}

/* Forms explain readiness where the decision happens. */
.fj-decision-ui-v1030 .fj-xp-form {
  position: relative;
}

.fj-decision-ui-v1030 .fj-xp-required-mark {
  display: inline-flex;
  margin-left: 6px;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--fj-violet-soft);
  color: var(--fj-violet-ink);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .045em;
  line-height: 1;
  text-transform: uppercase;
}

.fj-decision-ui-v1030 .fj-xp-required-field {
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.fj-decision-ui-v1030 .fj-xp-field-error :where(input, select, textarea),
.fj-decision-ui-v1030 :where(input, select, textarea).fj-xp-field-error {
  border-color: var(--fj-red) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fj-red) 15%, transparent) !important;
}

.fj-decision-ui-v1030 .fj-xp-form-status {
  grid-column: 1 / -1;
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--fj-gold) 45%, var(--fj-line));
  border-radius: 10px;
  background: var(--fj-gold-soft);
  color: var(--fj-ink-soft);
  font-size: 10px;
}

.fj-decision-ui-v1030 .fj-xp-form-status > span {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: 0 0 23px;
  border-radius: 7px;
  background: var(--fj-gold);
  color: #172033;
  font-weight: 950;
}

.fj-decision-ui-v1030 .fj-xp-form-status.is-ready {
  border-color: color-mix(in srgb, var(--fj-green) 42%, var(--fj-line));
  background: var(--fj-green-soft);
}

.fj-decision-ui-v1030 .fj-xp-form-status.is-ready > span {
  background: var(--fj-green);
  color: #fff;
}

.fj-decision-ui-v1030 .fj-xp-form-status.is-alert {
  animation: fj-xp-attention .7s ease;
}

@keyframes fj-xp-attention {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
}

/* Locked and empty states communicate status, not failure. */
.fj-decision-ui-v1030 .fj-xp-locked-state {
  position: relative;
}

.fj-decision-ui-v1030 :where(button, input, select, textarea):disabled {
  cursor: not-allowed !important;
  opacity: .72;
  filter: saturate(.55);
}

.fj-decision-ui-v1030 .fj-xp-empty-state {
  position: relative;
  min-height: 96px;
  display: grid !important;
  align-content: center;
  gap: 4px;
  padding: 16px 16px 16px 58px !important;
  border: 1px dashed var(--fj-line-strong) !important;
  border-radius: 15px !important;
  background: var(--fj-surface-2) !important;
}

.fj-decision-ui-v1030 .fj-xp-empty-state::before {
  content: "✓";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fj-teal-soft);
  color: var(--fj-teal-ink);
  font-weight: 950;
  transform: translateY(-50%);
}

.fj-decision-ui-v1030 .fj-xp-empty-state :where(h2, h3, h4, strong) { color: var(--fj-ink) !important; }
.fj-decision-ui-v1030 .fj-xp-empty-state :where(p, span, small) { color: var(--fj-muted) !important; }

/* Progressive disclosure keeps long pages approachable. */
.fj-decision-ui-v1030 .fj-xp-disclosure > :first-child {
  min-width: 0;
}

.fj-decision-ui-v1030 .fj-xp-disclosure-toggle {
  min-height: 34px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-left: auto;
  padding: 7px 9px;
  border: 1px solid var(--fj-line);
  border-radius: 9px;
  background: var(--fj-surface-2);
  color: var(--fj-ink-soft);
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.fj-decision-ui-v1030 .fj-xp-disclosure-toggle span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--fj-violet-soft);
  color: var(--fj-violet-ink);
}

.fj-decision-ui-v1030 .fj-xp-disclosure-body {
  display: grid;
  gap: inherit;
}

.fj-decision-ui-v1030 .fj-xp-disclosure-body[hidden] { display: none !important; }
.fj-decision-ui-v1030 .fj-xp-disclosure.is-collapsed { padding-bottom: 12px !important; }

/* Choice rails remain usable on a narrow screen without squeezing labels. */
.fj-decision-ui-v1030 .fj-xp-choice-rail {
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.fj-decision-ui-v1030 .fj-xp-choice-rail :where(a, button, [role="tab"]) {
  min-height: 42px;
}

.fj-decision-ui-v1030 .fj-xp-choice-grid > :where(article, section, a) {
  min-width: 0;
}

/* Tables become readable records on phones instead of miniature spreadsheets. */
.fj-decision-ui-v1030 table.fj-xp-table {
  width: 100%;
}

/* Page-specific decision order. */
.fj-decision-ui-v1030.fj-xp-screen-muro .fj-wall641-main { min-width: 0; }
.fj-decision-ui-v1030.fj-xp-screen-ranking .fj-ranking-my-position { order: -1; }
.fj-decision-ui-v1030.fj-xp-screen-mercado .fj-market-self-state { margin-top: 0; }
.fj-decision-ui-v1030.fj-xp-screen-admin_panel .fj-sp649-priorities { border-color: color-mix(in srgb, var(--fj-gold) 50%, var(--fj-line)); }
.fj-decision-ui-v1030.fj-xp-screen-insignias .fj-desafio-panel.is-active { display: grid; gap: 14px; }

@media (max-width: 780px) {
  .fj-decision-ui-v1030 .fj-xp-content { gap: 12px; }

  .fj-decision-ui-v1030 .fj-xp-choice-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding: 3px 2px 9px !important;
    scroll-snap-type: x proximity;
  }

  .fj-decision-ui-v1030 .fj-xp-choice-rail > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  .fj-decision-ui-v1030 .fj-xp-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .fj-decision-ui-v1030.fj-xp-screen-muro .fj-wall641-layout {
    display: flex !important;
    flex-direction: column !important;
  }
  .fj-decision-ui-v1030.fj-xp-screen-muro .fj-wall641-main { order: 1; }
  .fj-decision-ui-v1030.fj-xp-screen-muro .fj-wall641-sidebar { order: 2; }
}

@media (max-width: 600px) {
  .fj-decision-ui-v1030 .fj-xp-zone-label { font-size: 8.5px; }
  .fj-decision-ui-v1030 .fj-xp-form-status { width: 100%; }
  .fj-decision-ui-v1030 .fj-xp-choice-grid { grid-template-columns: 1fr !important; }

  .fj-decision-ui-v1030 .fj-desafio-hero-stats > * {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 10px;
    padding: 11px 13px !important;
  }
  .fj-decision-ui-v1030 .fj-desafio-hero-stats > * > :where(span, small):first-child {
    grid-column: 1;
    color: var(--fj-muted) !important;
    font-size: 10px !important;
    font-weight: 850;
  }
  .fj-decision-ui-v1030 .fj-desafio-hero-stats > * > strong {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    color: var(--fj-ink) !important;
    font-size: 20px !important;
  }
  .fj-decision-ui-v1030 .fj-desafio-hero-stats > * > small:not(:first-child) {
    grid-column: 1 / -1;
  }

  .fj-decision-ui-v1030 table.fj-xp-table,
  .fj-decision-ui-v1030 table.fj-xp-table tbody,
  .fj-decision-ui-v1030 table.fj-xp-table tr,
  .fj-decision-ui-v1030 table.fj-xp-table td {
    display: block;
    width: 100%;
  }

  .fj-decision-ui-v1030 table.fj-xp-table thead { display: none; }
  .fj-decision-ui-v1030 table.fj-xp-table tbody { display: grid; gap: 10px; }
  .fj-decision-ui-v1030 table.fj-xp-table tr {
    padding: 9px 11px;
    border: 1px solid var(--fj-line);
    border-radius: 13px;
    background: var(--fj-surface-2);
  }
  .fj-decision-ui-v1030 table.fj-xp-table td {
    display: grid;
    grid-template-columns: minmax(86px, .7fr) minmax(0, 1.3fr);
    gap: 9px;
    padding: 7px 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  .fj-decision-ui-v1030 table.fj-xp-table td::before {
    content: attr(data-label);
    color: var(--fj-muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .045em;
    text-transform: uppercase;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fj-decision-ui-v1030 .fj-xp-form-status.is-alert { animation: none; }
  .fj-decision-ui-v1030 .fj-xp-required-field { transition: none; }
}