/* ===========================================================
   Marketplace SMC · Diagram Kit · v1.0
   Visio-style interactivo: SVG canvas + zoom + side panel + filtros
   Reusable para todos los docs que tengan diagramas técnicos
   =========================================================== */

/* CANVAS WRAPPER */
.diagram-wrapper {
  position: relative;
  background: #FAFBFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  margin: 32px 0;
  min-height: 600px;
}

.diagram-wrapper.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  border-radius: 0;
  margin: 0;
}

/* TÍTULO + FILTROS */
.diagram-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: white;
  border-bottom: 1px solid #E2E8F0;
  flex-wrap: wrap;
  gap: 12px;
}

.diagram-title {
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.3px;
  margin: 0;
}

.diagram-subtitle {
  font-size: 12px;
  color: #64748B;
  margin: 2px 0 0;
}

.diagram-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.diagram-filter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}

.diagram-filter:hover { background: #E2E8F0; }
.diagram-filter.is-active {
  background: #0F172A;
  color: white;
  border-color: #0F172A;
}
.diagram-filter[data-channel="meli"].is-active   { background: #FFE600; color: #1A1A1A; border-color: #FFE600; }
.diagram-filter[data-channel="d2c"].is-active    { background: #00C1C1; color: white; border-color: #00C1C1; }
.diagram-filter[data-channel="mp"].is-active     { background: #3B82F6; color: white; border-color: #3B82F6; }
.diagram-filter[data-channel="b2b"].is-active    { background: #F59E0B; color: white; border-color: #F59E0B; }

/* CANVAS (SVG dentro) */
.diagram-canvas {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: hidden;
  background:
    linear-gradient(to right, rgba(15,23,42,0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    #FAFBFC;
  cursor: grab;
}
.diagram-canvas:active { cursor: grabbing; }

.diagram-svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transition: transform .12s cubic-bezier(.16, 1, .3, 1);
}
.diagram-canvas.is-panning .diagram-svg { transition: none; }

/* TOOLBAR ZOOM */
.diagram-toolbar {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
  z-index: 10;
}

.diagram-toolbar button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  font-size: 18px;
  font-weight: 600;
  transition: all .12s;
}
.diagram-toolbar button:hover { background: #F1F5F9; color: #0F172A; }
.diagram-toolbar button:active { transform: scale(0.92); }
.diagram-toolbar .divider { height: 1px; background: #E2E8F0; margin: 2px 4px; }

.diagram-zoom-indicator {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #0F172A;
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  z-index: 10;
  letter-spacing: 0.5px;
}

/* BLOQUES SVG (estilo) */
.diagram-svg .block {
  cursor: pointer;
  transition: opacity .2s, filter .2s;
}
.diagram-svg .block rect.block-bg {
  fill: white;
  stroke: #CBD5E1;
  stroke-width: 1.5;
  rx: 10;
  transition: stroke .15s, fill .15s, filter .15s;
}
.diagram-svg .block:hover rect.block-bg {
  stroke: #00C1C1;
  stroke-width: 2;
  filter: drop-shadow(0 6px 14px rgba(0,193,193,0.20));
}
.diagram-svg .block.is-highlight rect.block-bg {
  stroke: #00C1C1;
  stroke-width: 2.5;
  fill: #F0FDFA;
}
.diagram-svg .block.is-dimmed { opacity: 0.22; }
.diagram-svg .block .block-title {
  fill: #0F172A;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Inter', system-ui;
  pointer-events: none;
}
.diagram-svg .block .block-sub {
  fill: #64748B;
  font-size: 11px;
  font-family: 'Inter', system-ui;
  pointer-events: none;
}
.diagram-svg .block .block-code {
  fill: #00C1C1;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1px;
  font-weight: 600;
  pointer-events: none;
}

/* COLORES POR TIPO */
.diagram-svg .block.type-frontend rect.block-bg { fill: #ECFEFF; stroke: #06B6D4; }
.diagram-svg .block.type-backend  rect.block-bg { fill: #F0F9FF; stroke: #3B82F6; }
.diagram-svg .block.type-data     rect.block-bg { fill: #F0FDFA; stroke: #10B981; }
.diagram-svg .block.type-ai       rect.block-bg { fill: #FDF4FF; stroke: #C026D3; }
.diagram-svg .block.type-channel  rect.block-bg { fill: #FFFBEB; stroke: #F59E0B; }
.diagram-svg .block.type-payment  rect.block-bg { fill: #FEF2F2; stroke: #EF4444; }
.diagram-svg .block.type-logistic rect.block-bg { fill: #F5F3FF; stroke: #7C3AED; }
.diagram-svg .block.type-infra    rect.block-bg { fill: #F8FAFC; stroke: #64748B; }
.diagram-svg .block.type-actor    rect.block-bg { fill: #FFFFFF; stroke: #0F172A; stroke-width: 2; }

/* GRUPOS dotted */
.diagram-svg .group-frame {
  fill: rgba(15,23,42,0.025);
  stroke: #94A3B8;
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  rx: 14;
}
.diagram-svg .group-label {
  fill: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: 'Inter', system-ui;
}

/* CONEXIONES */
.diagram-svg .conn {
  stroke: #94A3B8;
  stroke-width: 1.5;
  fill: none;
  transition: stroke .15s, stroke-width .15s, opacity .2s;
}
.diagram-svg .conn.is-highlight {
  stroke: #00C1C1;
  stroke-width: 2.5;
}
.diagram-svg .conn.is-dimmed { opacity: 0.15; }
.diagram-svg .conn-label {
  fill: #475569;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  pointer-events: none;
}

/* SIDE PANEL */
.diagram-panel {
  position: absolute;
  top: 0;
  right: -440px;
  bottom: 0;
  width: 420px;
  max-width: 90%;
  background: white;
  border-left: 1px solid #E2E8F0;
  box-shadow: -12px 0 32px rgba(15,23,42,0.10);
  transition: right .3s cubic-bezier(.16, 1, .3, 1);
  z-index: 20;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.diagram-panel.is-open { right: 0; }

.diagram-panel-header {
  padding: 24px 24px 18px;
  border-bottom: 1px solid #F1F5F9;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.diagram-panel-type {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: #00C1C1;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.diagram-panel-title {
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 6px;
  letter-spacing: -0.4px;
  padding-right: 32px;
}
.diagram-panel-sub {
  font-size: 13px;
  color: #64748B;
  margin: 0;
}

.diagram-panel-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  border: none;
  background: #F1F5F9;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diagram-panel-close:hover { background: #E2E8F0; color: #0F172A; }

.diagram-panel-body {
  padding: 20px 24px 32px;
  flex: 1;
}

.panel-section { margin-bottom: 22px; }
.panel-section-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #94A3B8;
  font-weight: 700;
  margin: 0 0 8px;
}
.panel-section p, .panel-section ul {
  font-size: 13.5px;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}
.panel-section ul { padding-left: 18px; }
.panel-section li { margin-bottom: 4px; }

.panel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.panel-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  background: #F1F5F9;
  color: #475569;
  padding: 4px 9px;
  border-radius: 6px;
  font-weight: 600;
}
.panel-chip.is-channel-meli   { background: #FEF3C7; color: #92400E; }
.panel-chip.is-channel-d2c    { background: #CFFAFE; color: #0E7490; }
.panel-chip.is-channel-mp     { background: #DBEAFE; color: #1E40AF; }
.panel-chip.is-channel-b2b    { background: #FED7AA; color: #9A3412; }

.panel-related {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panel-related a {
  display: block;
  padding: 10px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  text-decoration: none;
  color: #0F172A;
  font-size: 12.5px;
  font-weight: 600;
  transition: all .12s;
}
.panel-related a:hover {
  background: #ECFEFF;
  border-color: #00C1C1;
  transform: translateX(2px);
}
.panel-related a small {
  display: block;
  color: #64748B;
  font-weight: 400;
  margin-top: 2px;
  font-size: 11px;
}

/* RESPONSIVE */
@media (max-width: 800px) {
  .diagram-canvas { height: 520px; }
  .diagram-panel { width: 100%; right: -100%; }
}

/* ===========================================================
   PROCESS PIPELINE · scenario selector + etapas + INT boxes
   =========================================================== */

.process-wrapper {
  position: relative;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  margin: 32px 0;
}

/* SELECTOR ESCENARIOS · cards A/B/C/D/E estilo CEM */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 24px;
  background: #FAFBFC;
  border-bottom: 1px solid #E2E8F0;
}

.scenario-card {
  position: relative;
  padding: 18px 18px 18px 70px;
  background: white;
  border: 2px solid #E2E8F0;
  border-radius: 14px;
  cursor: pointer;
  transition: all .18s cubic-bezier(.16, 1, .3, 1);
  min-height: 96px;
}
.scenario-card:hover {
  border-color: #94A3B8;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}
.scenario-card.is-active {
  background: #1E1B4B;
  border-color: #1E1B4B;
  box-shadow: 0 12px 32px rgba(30,27,75,0.25);
}
.scenario-card.is-active .scenario-letter {
  background: white;
  color: #1E1B4B;
}
.scenario-card.is-active .scenario-title { color: white; }
.scenario-card.is-active .scenario-sub { color: rgba(255,255,255,0.7); }

.scenario-letter {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F1F5F9;
  color: #475569;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  transition: all .18s;
}

.scenario-title {
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}
.scenario-sub {
  font-size: 12px;
  color: #64748B;
  margin: 0;
  line-height: 1.45;
}

/* CALLOUT escenario activo */
.scenario-detail {
  background: #EFF6FF;
  border-left: 4px solid #3B82F6;
  padding: 16px 24px;
  font-size: 13.5px;
  color: #1E3A8A;
  line-height: 1.55;
}
.scenario-detail strong { color: #0F172A; }

/* PIPELINE · header dark con etapas */
.pipeline-shell {
  padding: 0;
}

.pipeline-header {
  display: flex;
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
  color: white;
  position: relative;
}
.pipeline-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  pointer-events: none;
}

.pipeline-stage-head {
  flex: 1;
  padding: 22px 20px 20px;
  border-right: 1px solid rgba(255,255,255,0.10);
  position: relative;
}
.pipeline-stage-head:last-child { border-right: none; }
.pipeline-stage-head.is-last {
  background: linear-gradient(135deg, #047857 0%, #10B981 100%);
}

.pipeline-stage-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pipeline-stage-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin: 0;
}
.pipeline-stage-head.is-last .pipeline-stage-name::after {
  content: ' ✓';
  font-size: 18px;
}

/* PIPELINE · body con columnas por etapa */
.pipeline-body {
  display: flex;
  padding: 36px 16px 32px;
  background: #FAFBFC;
  min-height: 280px;
  position: relative;
  overflow-x: auto;
}

.pipeline-stage-col {
  flex: 1;
  min-width: 160px;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

/* Línea de tiempo entre etapas (puntos + dashed line) */
.pipeline-stage-col::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -8px;
  right: -8px;
  border-top: 2px dashed #CBD5E1;
  z-index: 0;
}
.pipeline-stage-col:first-child::before { left: 50%; }
.pipeline-stage-col:last-child::before  { right: 50%; }
.pipeline-stage-col::after {
  content: '';
  position: absolute;
  top: 11px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1E1B4B;
  border: 3px solid white;
  box-shadow: 0 0 0 1px #1E1B4B;
  z-index: 1;
}
.pipeline-stage-col.is-last::after {
  background: #10B981;
  box-shadow: 0 0 0 1px #10B981;
}

.pipeline-stage-col-inner {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* INT BOX · estilo CEM */
.int-box {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all .14s;
  position: relative;
  z-index: 2;
}
.int-box:hover {
  border-color: #00C1C1;
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(0,193,193,0.15);
}
.int-box.is-active {
  border-color: #00C1C1;
  background: #ECFEFF;
}

.int-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #1E40AF;
  margin-bottom: 4px;
  display: block;
}
.int-label {
  font-size: 12.5px;
  color: #0F172A;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}
.int-stack {
  font-size: 10.5px;
  color: #64748B;
  margin-top: 4px;
  display: block;
}

/* COLORES INT por tipo de paso */
.int-box.kind-search  .int-code { color: #1E40AF; }
.int-box.kind-create  .int-code { color: #047857; }
.int-box.kind-update  .int-code { color: #B45309; }
.int-box.kind-delete  .int-code { color: #B91C1C; }
.int-box.kind-notify  .int-code { color: #6D28D9; }
.int-box.kind-pay     .int-code { color: #BE185D; }
.int-box.kind-doc     .int-code { color: #0E7490; }

.int-box.kind-search  { background: #F0F9FF; }
.int-box.kind-create  { background: #F0FDF4; }
.int-box.kind-update  { background: #FFFBEB; }
.int-box.kind-delete  { background: #FEF2F2; }
.int-box.kind-notify  { background: #F5F3FF; }
.int-box.kind-pay     { background: #FDF2F8; }
.int-box.kind-doc     { background: #ECFEFF; }

.pipeline-meta {
  padding: 14px 24px 20px;
  font-size: 11.5px;
  color: #64748B;
  background: #FAFBFC;
  border-top: 1px solid #E2E8F0;
}
.pipeline-meta strong { color: #0F172A; }

@media (max-width: 800px) {
  .pipeline-body { padding: 24px 8px; }
  .pipeline-stage-head { padding: 16px 12px 14px; }
  .pipeline-stage-name { font-size: 14px; }
}

/* ===========================================================
   GENÉRICO host + caption
   =========================================================== */
.diagram-section { margin: 28px 0; }
.diagram-caption { font-size: 13px; color: #475569; margin: 0 0 14px; line-height: 1.55; }

/* ===========================================================
   SWATCH GRID · paleta visual
   =========================================================== */
.swatch-head { margin-bottom: 24px; }
.swatch-title { font-size: 18px; font-weight: 800; color: #0F172A; letter-spacing: -0.3px; }
.swatch-sub   { font-size: 13px; color: #64748B; margin-top: 4px; }
.swatch-group { margin-bottom: 28px; }
.swatch-group-name { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #94A3B8; font-weight: 700; margin-bottom: 12px; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.swatch-card { display: flex; gap: 14px; align-items: center; padding: 10px; background: white; border: 1px solid #E2E8F0; border-radius: 12px; cursor: pointer; transition: all .15s; position: relative; }
.swatch-card:hover { border-color: #00C1C1; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,193,193,0.10); }
.swatch-card.is-copied::after { content: 'copiado'; position: absolute; top: 4px; right: 8px; font-size: 9px; color: #10B981; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.swatch-chip { width: 64px; height: 64px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.06); flex-shrink: 0; }
.swatch-info { flex: 1; min-width: 0; }
.swatch-token { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #0F172A; font-weight: 700; }
.swatch-hex   { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #475569; margin-top: 2px; }
.swatch-rgb   { font-size: 10px; color: #94A3B8; margin-top: 2px; }
.swatch-uso   { font-size: 11px; color: #64748B; margin-top: 4px; line-height: 1.3; }

/* ===========================================================
   HEATMAP · matriz P×I
   =========================================================== */
.heatmap-head { font-size: 16px; font-weight: 800; color: #0F172A; margin-bottom: 14px; }
.heatmap-shell { display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto 32px; gap: 8px; margin-bottom: 18px; }
.heatmap-axis-y { display: flex; flex-direction: column; justify-content: space-around; font-size: 11px; color: #64748B; text-align: right; padding-right: 4px; letter-spacing: 0.5px; font-weight: 600; }
.heatmap-grid { display: grid; gap: 6px; min-height: 280px; }
.heatmap-cell { border-radius: 10px; padding: 10px; display: flex; align-items: center; justify-content: center; min-height: 80px; }
.heatmap-cell.is-sev-low  { background: #DCFCE7; }
.heatmap-cell.is-sev-med  { background: #FEF3C7; }
.heatmap-cell.is-sev-high { background: #FEE2E2; }
.heatmap-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.heatmap-dot { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; background: rgba(15,23,42,0.85); color: white; padding: 4px 8px; border-radius: 999px; letter-spacing: 0.5px; }
.heatmap-cell.is-sev-high .heatmap-dot { background: #991B1B; }
.heatmap-cell.is-sev-med  .heatmap-dot { background: #B45309; }
.heatmap-cell.is-sev-low  .heatmap-dot { background: #166534; }
.heatmap-axis-y-label { grid-row: 1; grid-column: 1; align-self: center; transform: rotate(-90deg) translateX(-30px); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #475569; font-weight: 700; }
.heatmap-axis-x { grid-row: 2; grid-column: 2; display: flex; justify-content: space-around; font-size: 11px; color: #64748B; font-weight: 600; letter-spacing: 0.5px; }
.heatmap-axis-x-label { grid-column: 2; text-align: center; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #475569; font-weight: 700; margin-top: 4px; }
.heatmap-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; font-size: 12px; color: #334155; margin-top: 10px; }
.heatmap-legend-item { padding: 6px 10px; background: #F8FAFC; border-radius: 8px; }
.heatmap-legend-id { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; background: #0F172A; color: white; padding: 2px 7px; border-radius: 999px; margin-right: 6px; font-weight: 700; }

/* ===========================================================
   FUNNEL
   =========================================================== */
.funnel-title { font-size: 16px; font-weight: 800; color: #0F172A; margin-bottom: 16px; }
.funnel-shell { display: flex; flex-direction: column; gap: 18px; }
.funnel-row { display: flex; flex-direction: column; align-items: center; }
.funnel-bar { display: flex; justify-content: space-between; align-items: center; min-width: 200px; max-width: 100%; padding: 14px 22px; color: white; border-radius: 12px; font-weight: 700; transition: width .3s; }
.funnel-label { font-size: 14px; letter-spacing: 0.3px; }
.funnel-value { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 800; }
.funnel-sub  { font-size: 11px; color: #64748B; margin-top: 6px; letter-spacing: 0.5px; text-transform: uppercase; }
.funnel-conv { font-size: 11px; color: #94A3B8; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-weight: 600; }

/* ===========================================================
   GANTT
   =========================================================== */
.gantt-title { font-size: 16px; font-weight: 800; color: #0F172A; margin-bottom: 12px; }
.gantt-shell { border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden; background: white; }
.gantt-header { display: grid; background: #0F172A; color: white; }
.gantt-corner { padding: 12px 14px; border-right: 1px solid rgba(255,255,255,0.1); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.gantt-month  { padding: 12px 8px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; border-right: 1px solid rgba(255,255,255,0.05); }
.gantt-body   { display: flex; flex-direction: column; }
.gantt-row    { display: grid; position: relative; border-bottom: 1px solid #F1F5F9; min-height: 46px; align-items: center; }
.gantt-row:nth-child(even) { background: #FAFBFC; }
.gantt-label  { padding: 8px 14px; border-right: 1px solid #E2E8F0; }
.gantt-task-name  { font-size: 13px; font-weight: 700; color: #0F172A; line-height: 1.25; }
.gantt-task-owner { font-size: 10.5px; color: #94A3B8; letter-spacing: 0.5px; margin-top: 2px; }
.gantt-cell   { border-right: 1px solid #F1F5F9; }
.gantt-bar    { grid-row: 1; height: 26px; margin: 10px 4px; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.gantt-bar-label { color: white; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===========================================================
   CANVAS 9 (Strategyzer)
   =========================================================== */
.canvas9-title { font-size: 16px; font-weight: 800; color: #0F172A; margin-bottom: 12px; }
.canvas9-shell { display: flex; flex-direction: column; gap: 8px; }
.canvas9-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr;
  gap: 8px;
}
.canvas9-col { display: grid; gap: 8px; }
.canvas9-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.canvas9-cell { background: white; border: 1px solid #E2E8F0; border-radius: 12px; padding: 12px 14px; min-height: 120px; }
.canvas9-cell-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #F1F5F9; }
.canvas9-cell-icon { font-size: 18px; }
.canvas9-cell-title { font-size: 12px; font-weight: 800; color: #0F172A; letter-spacing: 0.3px; }
.canvas9-list { list-style: none; padding: 0; margin: 0; }
.canvas9-list li { font-size: 12px; color: #334155; padding: 4px 0; line-height: 1.4; }
.canvas9-list li::before { content: '· '; color: #00C1C1; font-weight: 800; }

/* ===========================================================
   SLIDES DECK
   =========================================================== */
.slides-title { font-size: 16px; font-weight: 800; color: #0F172A; margin-bottom: 16px; }
.slides-shell {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.slide-card {
  position: relative;
  padding: 24px 22px 20px;
  background: linear-gradient(155deg, var(--slide-color, #0F172A) 0%, color-mix(in srgb, var(--slide-color, #0F172A) 80%, white) 100%);
  color: white;
  border-radius: 16px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.slide-card::before { content: ''; position: absolute; top: -20%; right: -10%; width: 60%; height: 80%; background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 60%); pointer-events: none; }
.slide-num    { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.45); }
.slide-kicker { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 8px; }
.slide-title  { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin: 8px 0 12px; line-height: 1.1; }
.slide-body   { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.85); margin: 0; flex: 1; }
.slide-kpi    { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 800; color: white; margin-top: 14px; letter-spacing: -0.5px; }
.slide-bullets { list-style: none; padding: 0; margin: 14px 0 0; font-size: 12px; color: rgba(255,255,255,0.85); }
.slide-bullets li { padding: 4px 0; padding-left: 14px; position: relative; }
.slide-bullets li::before { content: '◆'; position: absolute; left: 0; color: rgba(255,255,255,0.4); }

/* ===========================================================
   POWER/INTEREST MATRIX
   =========================================================== */
.pim-title { font-size: 16px; font-weight: 800; color: #0F172A; margin-bottom: 12px; }
.pim-shell { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr 36px; gap: 8px; min-height: 320px; }
.pim-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #475569; font-weight: 700; align-self: center; }
.pim-axis-x { grid-column: 2; text-align: center; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #475569; font-weight: 700; align-self: end; }
.pim-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.pim-cell { padding: 14px; border-radius: 10px; display: flex; flex-direction: column; }
.pim-cell.pim-hl { background: #FEF3C7; }
.pim-cell.pim-hh { background: #FEE2E2; }
.pim-cell.pim-ll { background: #E2E8F0; }
.pim-cell.pim-lh { background: #DBEAFE; }
.pim-strategy { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #475569; margin-bottom: 10px; }
.pim-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.pim-dot { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; background: rgba(15,23,42,0.85); color: white; padding: 4px 9px; border-radius: 999px; }
.pim-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; font-size: 12px; color: #334155; margin-top: 14px; }
.pim-legend-id { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; background: #0F172A; color: white; padding: 2px 7px; border-radius: 999px; margin-right: 6px; font-weight: 700; }

/* ===========================================================
   CHART (line + bar)
   =========================================================== */
.chart-title { font-size: 16px; font-weight: 800; color: #0F172A; margin-bottom: 8px; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: #334155; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-svg { width: 100%; height: auto; max-height: 360px; background: #FAFBFC; border: 1px solid #E2E8F0; border-radius: 12px; }

@media (max-width: 800px) {
  .canvas9-grid { grid-template-columns: 1fr; }
  .canvas9-bottom { grid-template-columns: 1fr; }
}

/* ===========================================================
   JTBD CANVAS · Jobs To Be Done
   =========================================================== */
.jtbd-title { font-size: 18px; font-weight: 800; color: #0F172A; margin-bottom: 8px; letter-spacing: -0.3px; }
.jtbd-persona { font-size: 13px; color: #475569; margin-bottom: 18px; }
.jtbd-persona strong { color: #0F172A; }
.jtbd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; }
.jtbd-cell { background: white; border: 1px solid #E2E8F0; border-top: 4px solid var(--jtbd-c, #00C1C1); border-radius: 12px; padding: 16px 18px; min-height: 200px; }
.jtbd-cell-head { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #F1F5F9; }
.jtbd-cell-icon { font-size: 20px; }
.jtbd-cell-title { font-size: 13px; font-weight: 800; color: #0F172A; letter-spacing: 0.2px; }
.jtbd-list { list-style: none; padding: 0; margin: 0; }
.jtbd-list li { font-size: 13px; color: #334155; padding: 5px 0; line-height: 1.45; position: relative; padding-left: 18px; }
.jtbd-list li::before { content: '◆'; position: absolute; left: 0; color: var(--jtbd-c, #00C1C1); font-size: 9px; top: 8px; }
.jtbd-outcomes { background: linear-gradient(135deg, #0F172A 0%, #0F766E 100%); color: white; border-radius: 12px; padding: 20px 22px; }
.jtbd-outcomes .jtbd-cell-head { border-color: rgba(255,255,255,0.15); }
.jtbd-outcomes .jtbd-cell-title { color: white; }
.jtbd-outcomes .jtbd-list li { color: rgba(255,255,255,0.92); }
.jtbd-outcomes .jtbd-list li::before { color: #00C1C1; }

/* ===========================================================
   VALUE PROP CANVAS · Strategyzer
   =========================================================== */
.vp-title { font-size: 18px; font-weight: 800; color: #0F172A; margin-bottom: 18px; letter-spacing: -0.3px; }
.vp-shell { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 18px; }
.vp-side-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #475569; font-weight: 800; margin-bottom: 10px; text-align: center; }
.vp-side-shape { display: grid; gap: 10px; padding: 20px; min-height: 340px; }
.vp-square { background: linear-gradient(155deg, #ECFEFF 0%, #DBEAFE 100%); border: 2px solid #00C1C1; border-radius: 14px; grid-template-rows: 1fr 1fr 1fr; }
.vp-circle { background: linear-gradient(155deg, #FEF3C7 0%, #FED7AA 100%); border: 2px solid #F59E0B; border-radius: 50% / 22%; grid-template-rows: 1fr 1fr 1fr; padding: 30px 30px 30px; }
.vp-zone { background: rgba(255,255,255,0.85); border-radius: 10px; padding: 10px 14px; }
.vp-zone-head { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 800; color: #0F172A; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(15,23,42,0.08); }
.vp-zone-icon { font-size: 16px; }
.vp-zone ul { list-style: none; padding: 0; margin: 0; }
.vp-zone li { font-size: 12px; color: #334155; padding: 3px 0; line-height: 1.4; padding-left: 12px; position: relative; }
.vp-zone li::before { content: '·'; position: absolute; left: 4px; color: #475569; font-weight: 800; }
.vp-fit { background: #F8FAFC; border-left: 4px solid #10B981; padding: 14px 20px; font-size: 13px; color: #334155; border-radius: 0 12px 12px 0; line-height: 1.55; }
.vp-fit strong { color: #047857; }

@media (max-width: 800px) {
  .vp-shell { grid-template-columns: 1fr; }
  .vp-circle { border-radius: 14px; padding: 20px; }
}

/* ===========================================================
   MOBILE responsive tweaks (P3.7)
   =========================================================== */
@media (max-width: 800px) {
  .diagram-canvas { height: 460px; }
  .diagram-header { padding: 14px 16px; }
  .diagram-title { font-size: 14px; }
  .diagram-subtitle { font-size: 11px; }
  .diagram-filter { font-size: 10px; padding: 5px 9px; }
  .diagram-svg .block .block-title { font-size: 18px; }
  .diagram-svg .block .block-sub { font-size: 14px; }
  .diagram-toolbar { top: 8px; right: 8px; }
  .diagram-toolbar button { width: 28px; height: 28px; font-size: 15px; }
  .diagram-zoom-indicator { font-size: 9px; padding: 4px 8px; }
  .scenario-grid { grid-template-columns: 1fr; padding: 16px; gap: 10px; }
  .pipeline-stage-head { padding: 14px 10px; }
  .pipeline-stage-num { font-size: 9px; letter-spacing: 2px; }
  .pipeline-stage-name { font-size: 13px; }
  .heatmap-grid { min-height: 220px; }
  .heatmap-dot { font-size: 9px; padding: 3px 6px; }
  .swatch-chip { width: 50px; height: 50px; }
  .canvas9-cell { padding: 10px 12px; min-height: 90px; }
  .slide-card { min-height: 200px; padding: 18px 16px 14px; }
  .slide-title { font-size: 18px; }
  .gantt-shell { font-size: 11px; }
  .gantt-row { min-height: 38px; }
  .gantt-label { padding: 6px 10px; }
  .gantt-task-name { font-size: 11.5px; }
  .pim-shell { min-height: 280px; }
  .pim-strategy { font-size: 10px; }
}

/* ===========================================================
   PRINT CSS · Cmd+P / Save as PDF (P3.9)
   =========================================================== */
@media print {
  .diagram-toolbar,
  .diagram-zoom-indicator,
  .diagram-panel-close { display: none !important; }

  .diagram-canvas {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    page-break-inside: avoid;
  }
  .diagram-svg { transform: none !important; }
  .diagram-wrapper,
  .process-wrapper {
    border: 1px solid #94A3B8 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  .diagram-panel { display: none !important; }
  .scenario-card { break-inside: avoid; box-shadow: none !important; }
  .scenario-card.is-active { background: white !important; color: black !important; border: 2px solid black !important; }
  .scenario-card.is-active .scenario-letter { background: black !important; color: white !important; }
  .scenario-card.is-active .scenario-title { color: black !important; }
  .scenario-card.is-active .scenario-sub { color: #475569 !important; }
  .pipeline-header { background: #0F172A !important; -webkit-print-color-adjust: exact; color-adjust: exact; }
  .slide-card { -webkit-print-color-adjust: exact; color-adjust: exact; break-inside: avoid; }
  .int-box { break-inside: avoid; }
  .heatmap-cell { -webkit-print-color-adjust: exact; color-adjust: exact; }
  .chart-svg { background: white !important; }
}

/* ===========================================================
   ACCESIBILIDAD focus + sr-only (P3.10)
   =========================================================== */
.diagram-svg .block:focus,
.scenario-card:focus,
.int-box:focus,
.swatch-card:focus,
.diagram-filter:focus,
.diagram-toolbar button:focus,
.diagram-panel-close:focus {
  outline: 2px solid #00C1C1;
  outline-offset: 2px;
}
.diagram-svg .block { -webkit-tap-highlight-color: rgba(0,193,193,0.2); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================
   SWAGGER · OpenAPI-style endpoint catalog
   =========================================================== */
.swagger-shell {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  margin: 24px 0;
}

.swagger-head {
  padding: 24px 28px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: white;
}
.swagger-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
}
.swagger-baseurl {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: rgba(0,193,193,0.18);
  border: 1px solid rgba(0,193,193,0.4);
  padding: 4px 12px;
  border-radius: 999px;
  color: #5EEAD4;
  margin-top: 8px;
  margin-right: 8px;
}
.swagger-auth {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: rgba(255,255,255,0.08);
  padding: 4px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,0.85);
  margin-top: 8px;
}

.swagger-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 600px;
}

/* SIDEBAR */
.swagger-sidebar {
  background: #FAFBFC;
  border-right: 1px solid #E2E8F0;
  padding: 18px 0;
  overflow-y: auto;
  max-height: 800px;
  position: sticky;
  top: 0;
}
.swagger-tag-group { margin-bottom: 14px; }
.swagger-tag-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #475569;
}
.swagger-tag-icon { font-size: 14px; }
.swagger-sidebar-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px 7px 36px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #475569;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all .12s;
}
.swagger-sidebar-link:hover {
  background: #ECFEFF;
  color: #0F172A;
  border-left-color: #00C1C1;
}
.swagger-sidebar-link.is-active {
  background: #ECFEFF;
  color: #0F172A;
  border-left-color: #00C1C1;
  font-weight: 700;
}
.swagger-sidebar-method {
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
  min-width: 38px;
  text-align: center;
}

/* CONTENT */
.swagger-content {
  padding: 18px 28px 32px;
  overflow-y: auto;
  max-height: 800px;
}

/* TAG section */
.swagger-tag-section {
  margin-bottom: 32px;
}
.swagger-tag-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid #E2E8F0;
}
.swagger-tag-section-icon { font-size: 22px; }
.swagger-tag-section-title {
  font-size: 24px;
  font-weight: 700;
  color: #3b4151;
  letter-spacing: -0.3px;
  margin: 0;
}
.swagger-tag-section-head { border-bottom-color: rgba(59,65,81,0.3); padding-bottom: 8px; }

/* ENDPOINT card */
.swagger-endpoint {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .15s;
}
.swagger-endpoint:hover { border-color: #94A3B8; }

/* Petstore-style: borde + background tenue del color del método (collapsed) */
.swagger-endpoint[data-method="GET"]    { border-color: #61affe; background: rgba(97,175,254,0.05); }
.swagger-endpoint[data-method="POST"]   { border-color: #49cc90; background: rgba(73,204,144,0.05); }
.swagger-endpoint[data-method="PUT"]    { border-color: #fca130; background: rgba(252,161,48,0.05); }
.swagger-endpoint[data-method="PATCH"]  { border-color: #50e3c2; background: rgba(80,227,194,0.05); }
.swagger-endpoint[data-method="DELETE"] { border-color: #f93e3e; background: rgba(249,62,62,0.05); }
.swagger-endpoint[data-method="SSE"]    { border-color: #9012fe; background: rgba(144,18,254,0.05); }

/* Cuando expandido: background más saturado (Petstore look) */
.swagger-endpoint.is-open { box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.swagger-endpoint.is-open[data-method="GET"]    { background: rgba(97,175,254,0.10);  border-color: #61affe; }
.swagger-endpoint.is-open[data-method="POST"]   { background: rgba(73,204,144,0.10);  border-color: #49cc90; }
.swagger-endpoint.is-open[data-method="PUT"]    { background: rgba(252,161,48,0.10);  border-color: #fca130; }
.swagger-endpoint.is-open[data-method="PATCH"]  { background: rgba(80,227,194,0.10);  border-color: #50e3c2; }
.swagger-endpoint.is-open[data-method="DELETE"] { background: rgba(249,62,62,0.10);   border-color: #f93e3e; }
.swagger-endpoint.is-open[data-method="SSE"]    { background: rgba(144,18,254,0.10);  border-color: #9012fe; }

/* Method badge GRANDE estilo Petstore */
.swagger-method {
  font-family: 'Source Code Pro', 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 7px 0;
  border-radius: 5px;
  color: white;
  min-width: 78px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,0.1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.swagger-method-get    { background: #61affe; }
.swagger-method-post   { background: #49cc90; }
.swagger-method-put    { background: #fca130; }
.swagger-method-patch  { background: #50e3c2; }
.swagger-method-delete { background: #f93e3e; }
.swagger-method-sse    { background: #9012fe; }

/* Body cuando expandido · fondo blanco interno para legibilidad */
.swagger-endpoint.is-open .swagger-endpoint-body {
  background: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(0,0,0,0.08);
  border-radius: 0 0 8px 8px;
}

/* Status code grande en response · estilo Petstore */
.swagger-result-status.is-big {
  font-size: 22px;
  font-weight: 800;
  padding: 8px 14px;
  letter-spacing: 0.5px;
}
.swagger-result-status.is-big.code-2xx { background: #10B981; color: white; }
.swagger-result-status.is-big.code-3xx { background: #3B82F6; color: white; }
.swagger-result-status.is-big.code-4xx { background: #F59E0B; color: white; }
.swagger-result-status.is-big.code-5xx { background: #EF4444; color: white; }

/* Curl live preview · siempre visible mientras editás */
.swagger-curl-live {
  margin-top: 10px;
  padding: 8px 12px;
  background: #1E293B;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #93C5FD;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.4;
  position: relative;
  max-height: 120px;
  overflow-y: auto;
}
.swagger-curl-live::before {
  content: 'curl preview ▼';
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

/* Authorize button modal global · estilo Petstore */
.swagger-auth-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  color: #0F172A;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 2px solid #10B981;
  cursor: pointer;
  transition: all .14s;
  margin-left: auto;
}
.swagger-auth-modal-btn:hover { background: #10B981; color: white; }
.swagger-auth-modal-btn::before { content: '🔓'; }
.swagger-auth-modal-btn.is-locked::before { content: '🔒'; }
.swagger-auth-modal-btn.is-locked { border-color: #94A3B8; }
.swagger-auth-modal-btn.is-locked:hover { background: #475569; }

.swagger-endpoint-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.swagger-method {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: 6px;
  color: white;
  min-width: 64px;
  text-align: center;
}
.swagger-method-get    { background: #10B981; }
.swagger-method-post   { background: #3B82F6; }
.swagger-method-put    { background: #F59E0B; }
.swagger-method-patch  { background: #F97316; }
.swagger-method-delete { background: #EF4444; }
.swagger-method-sse    { background: #C026D3; }

.swagger-path {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  flex: 1;
}
.swagger-path .param { color: #C026D3; }
.swagger-summary {
  font-size: 12.5px;
  color: #64748B;
  font-weight: 500;
  flex: 2;
}
.swagger-arrow {
  font-size: 12px;
  color: #94A3B8;
  transition: transform .2s;
}
.swagger-endpoint.is-open .swagger-arrow { transform: rotate(180deg); color: #00C1C1; }

.swagger-endpoint-body {
  display: none;
  padding: 0 16px 18px;
  border-top: 1px solid #F1F5F9;
}
.swagger-endpoint.is-open .swagger-endpoint-body { display: block; }

.swagger-section {
  margin-top: 16px;
}
.swagger-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #94A3B8;
  margin-bottom: 8px;
}
.swagger-desc {
  font-size: 13.5px;
  color: #334155;
  line-height: 1.55;
}

/* Section labels grandes estilo Petstore */
.swagger-section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
  color: #3b4151;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(59,65,81,0.15);
}

.swagger-params-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  overflow: hidden;
}
.swagger-params-table th {
  text-align: left;
  background: #f5f6f7;
  padding: 10px 12px;
  border-bottom: 1px solid #E2E8F0;
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #3b4151;
  text-transform: none;
}
.swagger-params-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: top;
}
.swagger-params-table .param-name { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #0F172A; }
.swagger-params-table .param-type { font-family: 'JetBrains Mono', monospace; color: #C026D3; font-size: 11.5px; }
.swagger-params-table .param-required { color: #EF4444; font-weight: 700; }
.swagger-params-table .param-default { color: #64748B; font-style: italic; }

.swagger-code {
  background: #0F172A;
  color: #A7F3D0;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.5;
  overflow-x: auto;
  margin: 0;
  border-left: 3px solid #00C1C1;
}
.swagger-code .code-comment { color: #64748B; font-style: italic; }
.swagger-code .code-key { color: #FCA5A5; }
.swagger-code .code-str { color: #A7F3D0; }

.swagger-response-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid #F1F5F9;
}
.swagger-response-row:last-child { border-bottom: none; }
.swagger-response-code {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 5px;
  text-align: center;
}
.swagger-response-code.code-2xx { background: #D1FAE5; color: #065F46; }
.swagger-response-code.code-3xx { background: #DBEAFE; color: #1E40AF; }
.swagger-response-code.code-4xx { background: #FEF3C7; color: #92400E; }
.swagger-response-code.code-5xx { background: #FEE2E2; color: #991B1B; }
.swagger-response-desc { font-size: 13px; color: #334155; line-height: 1.4; }

.swagger-auth-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  background: #FEF3C7;
  color: #92400E;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: 8px;
}
.swagger-auth-tag.is-none { background: #DCFCE7; color: #166534; }

/* SCHEMAS section */
.swagger-schemas {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #E2E8F0;
}
.swagger-schema-card {
  background: #FAFBFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.swagger-schema-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 13px;
  color: #0F172A;
  margin-bottom: 8px;
}

@media (max-width: 800px) {
  .swagger-body { grid-template-columns: 1fr; }
  .swagger-sidebar { max-height: 220px; position: static; border-right: none; border-bottom: 1px solid #E2E8F0; }
  .swagger-content { max-height: none; padding: 16px; }
  .swagger-summary { display: none; }
}

/* ===========================================================
   SWAGGER LIVE · interactivo (login · try it out · execute)
   =========================================================== */
.swagger-login-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 28px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  font-size: 12.5px;
}
.swagger-login-bar input[type="email"],
.swagger-login-bar input[type="password"] {
  font-family: inherit;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid #CBD5E1;
  border-radius: 7px;
  background: white;
  min-width: 180px;
  transition: border-color .15s;
}
.swagger-login-bar input:focus { outline: none; border-color: #00C1C1; }

.swagger-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  transition: all .14s;
  background: #00C1C1;
  color: white;
}
.swagger-btn:hover { background: #0F766E; }
.swagger-btn.is-secondary { background: white; color: #0F172A; border: 1px solid #CBD5E1; }
.swagger-btn.is-secondary:hover { background: #F1F5F9; border-color: #00C1C1; color: #00C1C1; }
.swagger-btn.is-danger { background: #EF4444; }
.swagger-btn.is-danger:hover { background: #B91C1C; }

.swagger-status-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: auto;
}
.swagger-status-pill.is-unauth { background: #FEF3C7; color: #92400E; }
.swagger-status-pill.is-auth   { background: #D1FAE5; color: #065F46; }

/* TRY IT OUT toolbar dentro del endpoint */
.swagger-tryout {
  margin-top: 14px;
  padding: 14px 16px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: 10px;
}
.swagger-tryout-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1E40AF;
  font-weight: 800;
}

.swagger-tryout-fields {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.swagger-tryout-field {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: center;
}
.swagger-tryout-field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #1E40AF;
}
.swagger-tryout-field input,
.swagger-tryout-field textarea {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 6px 10px;
  border: 1px solid #BAE6FD;
  border-radius: 6px;
  background: white;
  width: 100%;
}
.swagger-tryout-field textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.4;
}
.swagger-tryout-field input:focus,
.swagger-tryout-field textarea:focus {
  outline: none;
  border-color: #00C1C1;
}

.swagger-tryout-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* RESPONSE PANEL */
.swagger-result {
  margin-top: 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  overflow: hidden;
}
.swagger-result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #0F172A;
  color: white;
  font-size: 11px;
}
.swagger-result-status {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
}
.swagger-result-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: rgba(255,255,255,0.6);
  margin-left: auto;
}
.swagger-result-body {
  background: #0F172A;
  color: #A7F3D0;
  padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.5;
  max-height: 320px;
  overflow: auto;
  margin: 0;
  border-top: 1px solid #1E293B;
}
.swagger-result-body.is-error { color: #FCA5A5; }

/* HISTORY panel (footer collapsable) */
.swagger-history {
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
  padding: 14px 28px;
  font-size: 12px;
  color: #475569;
}
.swagger-history-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  user-select: none;
}
.swagger-history-list {
  display: none;
  margin-top: 10px;
  max-height: 200px;
  overflow-y: auto;
}
.swagger-history.is-open .swagger-history-list { display: block; }
.swagger-history-row {
  display: grid;
  grid-template-columns: 50px 60px 1fr 80px 60px;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #E2E8F0;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.swagger-history-row:last-child { border-bottom: none; }
.swagger-history-row .h-method { font-weight: 700; padding: 2px 6px; border-radius: 4px; text-align: center; color: white; font-size: 10px; }
.swagger-history-row .h-status { font-weight: 700; padding: 2px 6px; border-radius: 4px; text-align: center; }
.swagger-history-row .h-status.code-2xx { background: #D1FAE5; color: #065F46; }
.swagger-history-row .h-status.code-3xx { background: #DBEAFE; color: #1E40AF; }
.swagger-history-row .h-status.code-4xx { background: #FEF3C7; color: #92400E; }
.swagger-history-row .h-status.code-5xx { background: #FEE2E2; color: #991B1B; }
.swagger-history-row .h-status.code-net { background: #E2E8F0; color: #475569; }
.swagger-history-row .h-time { color: #94A3B8; text-align: right; font-size: 10px; }

.swagger-cors-banner {
  margin-top: 12px;
  padding: 10px 14px;
  background: #FEF3C7;
  border-left: 3px solid #F59E0B;
  border-radius: 0 8px 8px 0;
  font-size: 11.5px;
  color: #92400E;
  line-height: 1.5;
}
.swagger-cors-banner code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; font-size: 10.5px; }

/* ===== B · Fix pipeline con 7+ stages · scroll horizontal + min-width ===== */
.pipeline-header,
.pipeline-body {
  overflow-x: auto;
  scrollbar-width: thin;
}
.pipeline-stage-head {
  min-width: 150px;
}
.pipeline-stage-col {
  min-width: 160px;
}
.pipeline-stage-name {
  font-size: 15px !important;
  line-height: 1.25;
  word-break: break-word;
}
.pipeline-header::-webkit-scrollbar,
.pipeline-body::-webkit-scrollbar { height: 6px; }
.pipeline-header::-webkit-scrollbar-thumb,
.pipeline-body::-webkit-scrollbar-thumb { background: rgba(0,193,193,0.35); border-radius: 3px; }
@media (max-width: 768px) {
  .pipeline-stage-head { min-width: 130px; padding: 14px 12px; }
  .pipeline-stage-col { min-width: 140px; }
  .pipeline-stage-name { font-size: 13px !important; }
}

/* ===== C · Simulación con pelotita · estilo "ejecutar test" ===== */
.bbp-sim-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 16px 0 8px;
  flex-wrap: wrap;
}
.bbp-sim-btn {
  background: var(--smc-primary, #00C1C1);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.bbp-sim-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,193,193,0.35); }
.bbp-sim-btn.pause { background: #F59E0B; }
.bbp-sim-btn.reset { background: var(--ink-300, #CBD5E1); color: var(--ink-700, #334155); }
.bbp-sim-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bbp-sim-status {
  font-size: 12px;
  color: var(--ink-500, #64748B);
  font-family: 'JetBrains Mono', monospace;
  margin-left: 8px;
}

/* Pelotita SVG */
#bbp-sim-ball {
  fill: #FB923C;
  stroke: white;
  stroke-width: 3;
  filter: drop-shadow(0 4px 12px rgba(251,146,60,0.5));
  transition: opacity 0.3s;
}
#bbp-sim-ball.hidden { opacity: 0; }

/* Highlight box activo */
.bbp-sim-active rect {
  stroke: #FB923C !important;
  stroke-width: 4 !important;
  filter: drop-shadow(0 0 12px rgba(251,146,60,0.6));
}

/* Popup proceso */
.bbp-sim-popup {
  position: fixed;
  z-index: 999;
  background: white;
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  border: 1px solid var(--ink-200, #E2E8F0);
  max-width: 360px;
  font-size: 13px;
  line-height: 1.5;
  display: none;
  animation: bbpPopIn 0.25s ease;
}
.bbp-sim-popup.show { display: block; }
@keyframes bbpPopIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.bbp-sim-popup h4 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--smc-primary-dark, #008C8C);
}
.bbp-sim-popup .sub {
  color: var(--ink-500, #64748B);
  font-size: 11px;
  margin-bottom: 10px;
}
.bbp-sim-popup .tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.bbp-sim-popup .tag {
  background: var(--ink-100, #F1F5F9);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 100px;
  color: var(--ink-700, #334155);
}
.bbp-sim-popup .close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-400, #94A3B8);
}

/* Modal detalle */
.bbp-sim-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.6);
  z-index: 998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bbp-sim-modal-bg.show { display: flex; }
.bbp-sim-modal {
  background: white;
  border-radius: 18px;
  max-width: 720px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
}
.bbp-sim-modal h3 { margin: 0 0 4px; color: var(--smc-primary-dark, #008C8C); }
.bbp-sim-modal .callout {
  background: var(--ink-50, #F8FAFC);
  border-left: 4px solid var(--smc-primary, #00C1C1);
  padding: 12px 16px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 13px;
}
.bbp-sim-modal .stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.bbp-sim-modal .stage-pill {
  background: var(--ink-100, #F1F5F9);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11px;
}
.bbp-sim-modal .stage-pill .num {
  font-weight: 800;
  color: var(--smc-primary-dark, #008C8C);
  font-family: monospace;
  font-size: 10px;
}