/* ==========================================================================
   ESTUDO & CADERNO DIDÁTICO · SIMULADOR DE TRELIÇAS
   Lobby Design System: Papel técnico aquecido (#f3f1ec), marfim de prancheta (#fbfaf7),
   tinta de traço (#16181b), terracota editorial (#c2410c), réguas técnicas de 1px (#d9d5cc),
   cantos nítidos de 3-4px e tipografia Instrument Serif + IBM Plex Sans + IBM Plex Mono.
   ========================================================================== */

:root {
  --study-bg: #f3f1ec;
  --study-surface: #fbfaf7;
  --study-ink: #16181b;
  --study-ink2: #4b4f55;
  --study-muted: #61656c;
  --study-faint: #9ea3ac;
  --study-rule: #d9d5cc;
  --study-soft: #ede9e0;
  --study-accent: #c2410c;
  --study-tension: #1f5fa8;
  --study-serif: 'Instrument Serif', Georgia, serif;
  --study-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --study-mono: 'IBM Plex Mono', Menlo, Consolas, monospace;
  --study-r: 4px;
  --study-r-btn: 3px;
}

/* ---------- Layout da Aba Estudo ---------- */
#pane-estudo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 24px;
}

#pane-estudo[hidden],
.study-card[hidden],
.pane[hidden],
[hidden] {
  display: none !important;
}

#pane-estudo > * + * {
  margin-top: 0 !important;
}

#pane-estudo .card {
  overflow-wrap: anywhere;
}

/* ---------- Cards Didáticos (Pranchas Técnicas) ---------- */
.study-card {
  background: var(--study-surface);
  border: 1px solid var(--study-rule);
  border-radius: var(--study-r);
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(22, 24, 27, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.study-card:hover {
  border-color: #b8b3a8;
}

.study-card-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.study-eyebrow {
  font-family: var(--study-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--study-accent);
}

#pane-estudo .study-card h2,
.study-card h2 {
  margin: 0 !important;
  font-family: var(--study-serif) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  color: var(--study-ink) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  line-height: 1.25 !important;
}

#pane-estudo .study-sub,
.study-sub {
  margin: 0 !important;
  font-family: var(--study-sans) !important;
  font-size: 13px !important;
  color: var(--study-ink2) !important;
  line-height: 1.45 !important;
}

/* ---------- Inputs & Campos de Projeto ---------- */
.study-field-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.study-field-group label {
  font-family: var(--study-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--study-ink);
}

#study-title {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--study-rule);
  border-radius: var(--study-r-btn);
  padding: 8px 12px;
  background: var(--study-surface);
  color: var(--study-ink);
  font-family: var(--study-sans);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#study-title:focus {
  background: #ffffff;
  border-color: var(--study-accent);
  box-shadow: 0 0 0 3px rgba(194, 65, 12, .12);
  outline: none;
}

/* ---------- Status e Avisos ---------- */
.study-status-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: -4px 0 2px;
}

#study-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--study-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--study-muted);
  margin: 0;
}

#study-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #15803d;
}

#study-status[data-error="true"] {
  color: var(--c, #dc2626);
}

#study-status[data-error="true"]::before {
  background: var(--c, #dc2626);
}

.study-alert-box {
  padding: 9px 12px;
  border-radius: var(--study-r-btn);
  font-family: var(--study-sans);
  font-size: 12px;
  line-height: 1.45;
  background: #fbf7ee;
  border: 1px solid #ebd9b5;
  color: #854d0e;
  margin: 0;
}

.study-footnote {
  font-family: var(--study-mono);
  font-size: 11px;
  color: var(--study-muted);
  line-height: 1.45;
  margin: 2px 0 0;
}

/* ---------- Grids de Ações (Alinhamento Preciso) ---------- */
.study-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.study-actions-grid .btn {
  width: 100%;
  min-height: 36px;
  font-family: var(--study-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--study-r-btn);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box;
}

.btn-block {
  width: 100%;
  min-height: 36px;
  font-family: var(--study-sans);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--study-r-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--study-muted) !important;
  box-shadow: none !important;
}

.btn-ghost:hover {
  background: var(--study-soft) !important;
  color: var(--study-ink) !important;
}

/* ---------- Trilha de Atividades Didáticas ---------- */
.study-activities {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.study-activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  min-height: 50px;
  border: 1px solid var(--study-rule);
  border-radius: var(--study-r-btn);
  background: var(--study-surface);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(22, 24, 27, .03);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .1s ease;
  user-select: none;
  touch-action: manipulation;
  width: 100%;
  box-sizing: border-box;
}

.study-activity-item:hover {
  border-color: var(--study-accent);
  background: #fdfcfb;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(194, 65, 12, .08);
}

.study-activity-item:active {
  transform: translateY(1px);
}

.activity-num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  background: var(--study-soft);
  color: var(--study-ink);
  font-family: var(--study-mono);
  font-weight: 600;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--study-rule);
  transition: background .18s, color .18s, border-color .18s;
}

.study-activity-item:hover .activity-num {
  background: var(--study-accent);
  color: #ffffff;
  border-color: var(--study-accent);
}

.activity-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.activity-text strong {
  font-family: var(--study-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--study-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-text span {
  font-family: var(--study-sans);
  font-size: 12px;
  color: var(--study-muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-arrow {
  flex: none;
  font-size: 13px;
  color: var(--study-muted);
  transition: transform .15s ease, color .15s ease;
}

.study-activity-item:hover .activity-arrow {
  transform: translateX(3px);
  color: var(--study-accent);
}

/* ---------- Card da Atividade em Andamento ---------- */
.study-card--active-activity {
  border-left: 3.5px solid var(--study-accent);
  background: var(--study-surface);
  box-shadow: 0 3px 12px -3px rgba(194, 65, 12, .08), 0 1px 3px rgba(22, 24, 27, .04);
}

.study-badge-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px;
  border-radius: 2px;
  background: rgba(194, 65, 12, .08);
  color: var(--study-accent);
  font-family: var(--study-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: fit-content;
  border: 1px solid rgba(194, 65, 12, .25);
  margin-bottom: 2px;
}

.study-instructions-box {
  margin: 2px 0 0;
  padding: 9px 12px;
  background: var(--study-soft);
  border-radius: var(--study-r-btn);
  font-family: var(--study-sans);
  font-size: 12.5px;
  color: var(--study-ink2);
  line-height: 1.45;
  border: 1px solid var(--study-rule);
}

.study-question-wrap {
  background: var(--study-surface);
  border: 1px solid var(--study-rule);
  border-radius: var(--study-r-btn);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.study-question-tag {
  font-family: var(--study-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--study-muted);
}

.study-question-text {
  margin: 0;
  font-family: var(--study-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--study-ink);
  line-height: 1.45;
}

.study-flow-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--study-rule);
}

.study-section-title {
  font-family: var(--study-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--study-ink);
}

.study-predictions-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.study-predictions-grid .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 12px;
  min-height: 38px;
  border-radius: var(--study-r-btn);
  font-family: var(--study-sans);
  font-size: 13px;
  text-align: left;
  border: 1px solid var(--study-rule);
  background: var(--study-surface);
  color: var(--study-ink);
  transition: all .15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(22, 24, 27, .04);
  box-sizing: border-box;
}

.study-predictions-grid .btn:hover:not(:disabled) {
  border-color: var(--study-accent);
  background: #fdfcfb;
  transform: translateX(2px);
}

.study-predictions-grid .btn[aria-pressed="true"] {
  background: var(--study-ink);
  color: #ffffff;
  border-color: var(--study-ink);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(22, 24, 27, .15);
}

.study-predictions-grid .btn:disabled:not([aria-pressed="true"]) {
  opacity: 0.45;
  background: var(--study-soft);
}

/* Ações da Atividade: Botão Sólido Escuro com Hover Terracota */
.study-actions-flow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.study-actions-flow #study-reveal {
  width: 100%;
  min-height: 38px;
  font-family: var(--study-sans);
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--study-r-btn);
  border: 1px solid var(--study-ink);
  background: var(--study-ink);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(22, 24, 27, .12);
  transition: all .18s cubic-bezier(0.16, 1, 0.3, 1);
}

.study-actions-flow #study-reveal:hover:not(:disabled) {
  background: var(--study-accent);
  border-color: var(--study-accent);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(194, 65, 12, .25);
}

.study-actions-flow #study-reveal:disabled {
  background: var(--study-soft);
  border-color: var(--study-rule);
  color: var(--study-muted);
  box-shadow: none;
}

.study-actions-flow-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.study-actions-flow-sub .btn {
  min-height: 34px;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: var(--study-r-btn);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box;
}

/* Fallback para caso .study-actions-triple seja usado */
.study-actions-triple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.study-actions-triple #study-reveal {
  grid-column: 1 / -1;
  min-height: 38px;
  font-weight: 600;
  border-radius: var(--study-r-btn);
  border-color: var(--study-ink);
  background: var(--study-ink);
  color: #ffffff;
}

.study-actions-triple #study-reveal:hover:not(:disabled) {
  background: var(--study-accent);
  border-color: var(--study-accent);
}

.study-actions-triple .btn {
  min-height: 34px;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: var(--study-r-btn);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box;
}

.study-feedback-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.study-feedback-box {
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 0 var(--study-r-btn) var(--study-r-btn) 0;
  font-family: var(--study-sans);
  font-size: 12.5px;
  line-height: 1.45;
  background: var(--study-soft);
  border-left: 3px solid var(--study-accent);
  color: var(--study-ink);
}

.study-feedback-box:empty {
  display: none;
}

.study-hint-box {
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: var(--study-r-btn);
  font-family: var(--study-sans);
  font-size: 12px;
  line-height: 1.4;
  background: #fbf7ee;
  border: 1px solid #ebd9b5;
  color: #854d0e;
}

.study-conclusion-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#study-conclusion {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--study-rule);
  border-radius: var(--study-r-btn);
  padding: 10px 12px;
  background: var(--study-surface);
  color: var(--study-ink);
  font-family: var(--study-sans);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  min-height: 84px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#study-conclusion:focus {
  border-color: var(--study-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, .12);
  background: #ffffff;
}

#study-complete {
  min-height: 40px;
  font-family: var(--study-sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--study-r-btn);
  background: var(--study-accent);
  border: 1px solid var(--study-accent);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(194, 65, 12, .2);
  transition: all .18s ease;
}

#study-complete:hover:not(:disabled) {
  background: #9a3412;
  border-color: #9a3412;
}

/* ---------- Comparação de Cenários A/B ---------- */
.study-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.compare-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--study-soft);
  padding: 10px;
  border-radius: var(--study-r-btn);
  border: 1px solid var(--study-rule);
  box-sizing: border-box;
}

.compare-col-header {
  font-family: var(--study-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--study-ink);
  text-align: center;
  margin-bottom: 2px;
}

.compare-group .btn {
  min-height: 34px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: var(--study-r-btn);
  width: 100%;
  box-sizing: border-box;
}

.study-comparison-wrap {
  overflow-x: auto;
}

.study-comparison-wrap table {
  width: 100%;
  font-family: var(--study-mono);
  font-size: 12px;
  border-collapse: collapse;
  margin-top: 8px;
  border: 1px solid var(--study-rule);
  border-radius: var(--study-r-btn);
  overflow: hidden;
}

.study-comparison-wrap th,
.study-comparison-wrap td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--study-rule);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.study-comparison-wrap th {
  background: var(--study-soft);
  font-weight: 600;
  color: var(--study-ink);
}

.study-comparison-wrap th:first-child,
.study-comparison-wrap td:first-child {
  text-align: left;
}

.study-comparison-wrap details {
  margin-top: 8px;
  font-family: var(--study-sans);
  font-size: 12px;
}

.study-comparison-wrap summary {
  cursor: pointer;
  color: var(--study-accent);
  font-weight: 600;
}

/* ---------- Histórico de Atividades ---------- */
.study-history-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.study-record {
  padding: 12px;
  border-radius: var(--study-r-btn);
  background: var(--study-soft);
  border: 1px solid var(--study-rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .15s ease;
}

.study-record:hover {
  border-color: #b8b3a8;
}

.study-record strong {
  font-family: var(--study-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--study-ink);
}

.study-record p {
  font-family: var(--study-sans);
  font-size: 12.5px;
  color: var(--study-ink2);
  margin: 0;
  line-height: 1.45;
  white-space: pre-wrap;
}

.study-record button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 12px;
  font-family: var(--study-sans);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--study-r-btn);
  border: 1px solid var(--study-rule);
  background: var(--study-surface);
  color: var(--study-ink);
  cursor: pointer;
  margin-right: 6px;
  margin-top: 4px;
  transition: all .15s ease;
}

.study-record button:hover {
  background: var(--study-ink);
  color: #ffffff;
  border-color: var(--study-ink);
  transform: translateY(-1px);
}

.study-record button:active {
  transform: translateY(1px);
}

/* ---------- Responsividade & Dispositivos Móveis ---------- */
@media (max-width: 520px) {
  .study-card {
    padding: 14px 12px;
  }
  .study-actions-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .study-actions-grid .btn {
    font-size: 11.5px;
    padding: 6px 4px;
    letter-spacing: -0.01em;
  }
  .btn-block {
    font-size: 12px;
  }
  .study-activity-item {
    padding: 8px 10px;
    gap: 10px;
    min-height: 48px;
  }
  .activity-text strong {
    font-size: 12.5px;
  }
  .activity-text span {
    font-size: 11px;
  }
}