/* ============================================================
   pilot.cr — blocks.css
   Estilos para los 8 tipos de bloques semánticos definidos
   en pilot_inventory/MODULES_SCHEMA.md.
   El generador Python de Fase 6 va a sustituir variables
   {{TITLE}}, {{TEXT}}, {{ITEMS}} con datos del MODULES.json
   y emitirá el HTML usando estos selectores.
   ============================================================ */

/* ============================================================
   1. PARAGRAPH (type: "paragraph")
   ============================================================ */
.block-paragraph {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  max-width: 760px;
}
.block-paragraph strong { font-weight: 700; color: var(--color-text); }

/* ============================================================
   2. LIST (type: "list", ordered: false|true)
   ============================================================ */
.block-list {
  margin: var(--space-4) 0 var(--space-6);
  padding-left: var(--space-6);
  display: flex; flex-direction: column;
  gap: var(--space-2);
  max-width: 800px;
}
.block-list--bulleted { list-style: disc; }
.block-list--bulleted li::marker { color: var(--color-primary); }
.block-list--ordered {
  list-style: decimal;
  counter-reset: block-list;
}
.block-list--ordered li::marker {
  color: var(--color-text-muted);
  font-weight: 700;
}
.block-list li {
  line-height: var(--line-height-relaxed);
  padding-left: var(--space-2);
}

/* ============================================================
   3. STEPS (type: "steps") — pasos numerados destacados
   ============================================================ */
.block-steps {
  display: flex; flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  max-width: 880px;
  counter-reset: block-step;
}
.block-steps__item {
  position: relative;
  display: flex;
  gap: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  counter-increment: block-step;
}
.block-steps__item::before {
  content: counter(block-step);
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: var(--font-size-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.block-steps__text {
  flex: 1;
  line-height: var(--line-height-relaxed);
  padding-top: 4px;
}

/* ============================================================
   4. CALLOUT (type: "callout", kind: info|tip|warning|danger|success)
   ============================================================ */
.callout {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid;
  margin: var(--space-6) 0;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.callout__title {
  font-size: var(--font-size-sm);
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.callout__body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0;
}
.callout__body strong { color: inherit; }

.callout--info {
  background: var(--color-soft-info-bg);
  border-color: var(--color-soft-info-border);
  color: var(--color-soft-info-text);
}
.callout--tip {
  background: var(--color-soft-tip-bg);
  border-color: var(--color-soft-tip-border);
  color: var(--color-soft-tip-text);
}
.callout--warning {
  background: var(--color-soft-warning-bg);
  border-color: var(--color-soft-warning-border);
  color: var(--color-soft-warning-text);
}
.callout--danger {
  background: var(--color-soft-danger-bg);
  border-color: var(--color-soft-danger-border);
  color: var(--color-soft-danger-text);
}
.callout--success {
  background: var(--color-soft-success-bg);
  border-color: var(--color-soft-success-border);
  color: var(--color-soft-success-text);
}

/* ============================================================
   5. EXAMPLE (type: "example") — scenario + steps + result
   ============================================================ */
.block-example {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  max-width: 920px;
}
.block-example__label {
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.block-example__title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
.block-example__scenario {
  background: var(--color-soft-neutral-bg);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  line-height: var(--line-height-relaxed);
}
.block-example__steps {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  list-style: decimal;
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
}
.block-example__steps li {
  line-height: var(--line-height-relaxed);
}
.block-example__steps li::marker { color: var(--color-primary); font-weight: 700; }
.block-example__result {
  background: var(--color-soft-tip-bg);
  border-left: 3px solid var(--color-soft-tip-border);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--color-soft-tip-text);
  font-weight: 600;
}
.block-example__result::before {
  content: 'Resultado: ';
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  margin-right: var(--space-1);
}

/* ============================================================
   6. CROSS_MODULE (type: "cross_module") — link card a otro módulo
   ============================================================ */
.block-cross-module {
  margin: var(--space-8) 0;
  max-width: 920px;
}
.block-cross-module__title {
  font-size: var(--font-size-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.block-cross-module__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.block-cross-module__link {
  display: flex; flex-direction: column;
  gap: var(--space-1);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: all var(--transition-base);
  color: var(--color-text);
  text-decoration: none;
}
.block-cross-module__link:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.block-cross-module__module-name {
  font-weight: 800;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.block-cross-module__what {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* ============================================================
   7. WHEN_IT_FAILS (type: "when_it_fails") — problem/solution pair
   ============================================================ */
.block-when-fails {
  margin: var(--space-8) 0;
  display: flex; flex-direction: column;
  gap: var(--space-3);
  max-width: 920px;
}
.block-when-fails__heading {
  font-size: var(--font-size-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-soft-warning-text);
  margin: 0 0 var(--space-2);
}
.block-when-fails__item {
  background: var(--color-soft-warning-bg);
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.block-when-fails__problem {
  font-weight: 700;
  color: var(--color-soft-warning-text);
  margin-bottom: var(--space-2);
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}
.block-when-fails__problem::before {
  content: 'Problema:';
  font-weight: 800;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.block-when-fails__solution {
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
  padding-left: calc(var(--font-size-lg) + var(--space-2));
}
.block-when-fails__solution::before {
  content: 'Solución: ';
  font-weight: 800;
  color: var(--color-primary);
}

/* ============================================================
   8. SHORTCUTS (type: "shortcuts") — tabla de teclas
   ============================================================ */
.block-shortcuts {
  margin: var(--space-8) 0;
  max-width: 720px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.block-shortcuts__row {
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  align-items: center;
  border-bottom: 1px solid var(--color-border-light);
}
.block-shortcuts__row:last-child { border-bottom: none; }
.block-shortcuts__keys {
  display: inline-flex; gap: var(--space-1);
  flex-wrap: wrap;
}
.block-shortcuts__key {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  padding: 4px 8px;
  background: var(--color-soft-neutral-bg);
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  color: var(--color-text);
  white-space: nowrap;
}
.block-shortcuts__action {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}