/* Колонки */
.cols{
  margin-top: 5mm; /* уменьшили зазор от строки Nombre до блоков */
  display:grid;
  grid-template-columns: repeat(var(--verticalCount, 4), var(--colW));
  column-gap: var(--cols-gap);
  justify-content: space-between; /* равномерно растягиваем свободное пространство */
  max-width: var(--contentW);
  margin-left: auto;
  margin-right: auto;
}

/* Одна вертикаль */
.col{
  width: var(--colW);
}

/* Синий блок PORTAL/UIS/RISER */
.bluebox{
  height: var(--blueH);
  background: var(--blue-fill);
  border: 0.55mm solid var(--blue-stroke);
  padding: var(--bluePad);
}
.bluegrid{
  display:grid;
  grid-template-columns: 16mm 1fr;
  grid-template-rows: repeat(4, minmax(4.4mm, auto));
  row-gap: 1.2mm;
  column-gap: 2mm;
  font-size: 3mm;
  align-items:center;
}
.bLbl{
  font-weight: 700;
  color: #103249;
}
.bVal{
  min-height: 4.4mm;
  padding: 0.3mm 1.2mm;
  outline:none;
  background: rgba(255,255,255,.55);
  border: 0.35mm solid rgba(16,50,73,.22);
}
.bVal:focus{
  background: rgba(255,255,255,.85);
  border-color: rgba(16,50,73,.55);
}

/* Подписи No. CDP / TIPO CDP и PLANTA / PUERTAS + линия */
.subHead{
  margin-top: 4mm;
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6mm;
  font-size: 2.6mm;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 1.8mm;
  border-bottom: 0.55mm solid var(--line-soft);
}
.subHead .shL{ text-align:left; }
.subHead .shR{ text-align:left; padding-left: 2mm; }

/* Тело: 2 списковые колонки + схема справа */
.body{
  margin-top: 4mm;
  display:flex;
  justify-content:center;
}

/* Схема вертикали */
.diagram{
  position: relative;
  height: var(--diagramH);
  width: 10mm;
  margin: 0 auto;
}
.binding-arrows{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.levelLabel{
  position:absolute;
  left: 6mm; /* ближе к вертикальной линии */
  transform: translateY(-50%); /* выравниваем по месту редлинии */
  font-size: 3mm;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.cdpInputWrap,
.fusionInputWrap,
.typeSelectWrap{
  position:absolute;
  left: -14mm;
  transform: translateY(-50%);
}
.cdpInputWrap{
  display: block;
}
.localesSummaryWrap{
  position:absolute;
  left: 10mm;
  transform: translateY(-50%);
}
.cdpGroupTag{
  position: absolute;
  right: calc(100% + 0.05mm);
  top: 50%;
  transform: translateY(-50%);
  min-width: 4mm;
  max-width: 5mm;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.7mm;
  font-weight: 700;
  color: #1f5b8f;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.cdpInput,
.fusionInput,
.typeSelect{
  width: var(--vFieldW, 10mm);
  height: var(--vFieldH, 5mm);
  border-radius: 1mm;
  border: 0.35mm solid rgba(27,62,90,.55);
  background: #ffffff;
  color: #1b1f26;
  font-size: 2mm;
  font-weight: 600;
  text-align: center;
  outline: none;
  padding: 0 0.5mm;
}
.cdpInput{
  background: #ffffff;
  text-align: center;
  padding: 0 0.5mm;
}
.fusionInput{
  background: #ffffff;
}
.cdpInput.bind-selected{
  border: 0.45mm solid var(--bind-color, #0f766e);
  box-shadow: 0 0 0 0.28mm var(--bind-glow, rgba(15,118,110,.22));
}
.cdpInput.bind-linked{
  border: 0.45mm solid var(--bind-color, #0ea5e9);
  box-shadow: 0 0 0 0.24mm var(--bind-glow, rgba(14,165,233,.22));
}
.cdpInput:focus{
  box-shadow: 0 0 0 0.35mm rgba(27,62,90,.18);
}
.typeSelect{
  background: #ffffff;
  appearance: none;
  -webkit-appearance: none;
  text-align-last: center;
}
.typeSelect:focus{
  box-shadow: 0 0 0 0.35mm rgba(27,62,90,.18);
}
.typeSelect.bind-linked{
  border: 0.45mm solid var(--bind-color, #0ea5e9);
  box-shadow: 0 0 0 0.24mm var(--bind-glow, rgba(14,165,233,.22));
}
.typeSelect.bind-selected{
  border: 0.45mm solid var(--bind-color, #0f766e);
  box-shadow: 0 0 0 0.28mm var(--bind-glow, rgba(15,118,110,.22));
}
.fusionInput:focus{
  box-shadow: 0 0 0 0.35mm rgba(27,62,90,.18);
}
.fusionInput.bind-linked{
  border: 0.45mm solid var(--bind-color, #0ea5e9);
  box-shadow: 0 0 0 0.24mm var(--bind-glow, rgba(14,165,233,.22));
}
.fusionInput.bind-selected{
  border: 0.45mm solid var(--bind-color, #0f766e);
  box-shadow: 0 0 0 0.28mm var(--bind-glow, rgba(15,118,110,.22));
}
.unitsInputGrid{
  position:absolute;
  left: 10mm;
  transform: translateY(-50%);
  display:grid;
  grid-template-columns: repeat(4, var(--unitCell, 4.2mm));
  grid-auto-rows: var(--unitCell, 4.2mm);
  gap: var(--unitGap, 0.5mm);
}
.unitChar{
  width: var(--unitCell, 4.2mm);
  height: var(--unitCell, 4.2mm);
  border: 0.35mm solid rgba(27,62,90,.55);
  border-radius: 0.6mm;
  background: #ffffff;
  color: #1b1f26;
  font-size: 1.7mm;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  outline: none;
  padding: 0;
  text-transform: uppercase;
}
.unitChar:focus{
  box-shadow: 0 0 0 0.35mm rgba(27,62,90,.18);
}
.unitChar.bind-linked{
  border: 0.45mm solid var(--bind-color, #0284c7);
  box-shadow: 0 0 0 0.2mm var(--bind-glow, rgba(2,132,199,.2));
}
.unitChar.bind-selected{
  border: 0.45mm solid var(--bind-color, #0f766e);
  box-shadow: 0 0 0 0.28mm var(--bind-glow, rgba(15,118,110,.20));
}
.localesSummaryInput{
  width: calc((var(--unitCell, 4.2mm) * 4) + (var(--unitGap, 0.5mm) * 3));
  height: var(--vFieldH, 5mm);
  border-radius: 0.8mm;
  border: 0.35mm solid rgba(27,62,90,.55);
  background: #ffffff;
  color: #1b1f26;
  font-size: 1.95mm;
  font-weight: 700;
  text-align: center;
  outline: none;
  padding: 0 0.8mm;
}
.localesSummaryInput.bind-linked{
  border: 0.45mm solid var(--bind-color, #0284c7);
  box-shadow: 0 0 0 0.2mm var(--bind-glow, rgba(2,132,199,.2));
}
.localesSummaryInput.bind-selected{
  border: 0.45mm solid var(--bind-color, #0f766e);
  box-shadow: 0 0 0 0.28mm var(--bind-glow, rgba(15,118,110,.20));
}
.bottomExtraInputWrap{
  position: absolute;
  left: 8.5mm;
  transform: translateY(calc(-50% - (2 * var(--vFieldH, 5mm))));
}
.bottomExtraInput{
  width: 18mm;
  height: var(--vFieldH, 5mm);
  border-radius: 0.8mm;
  border: 0.35mm solid rgba(27,62,90,.55);
  background: #ffffff;
  color: #1b1f26;
  font-size: 2.2mm;
  text-align: center;
  outline: none;
  padding: 0 0.8mm;
}
.bottomExtraInput:focus{
  box-shadow: 0 0 0 0.35mm rgba(27,62,90,.18);
}
.ctoEntriesWrap{
  position: absolute;
  left: 8.5mm;
  width: 22mm;
  display: grid;
  gap: 0.4mm;
  transform: translateY(-50%);
}
.ctoEntryLine{
  position: relative;
  min-height: var(--vFieldH, 5mm);
  border: 0.35mm solid rgba(27,62,90,.35);
  border-radius: 0.8mm;
  padding: 0 0.8mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  font-size: 2.1mm;
  color: #1b1f26;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ctoEntryLine.is-empty{
  cursor: default;
}
.ctoEntryLine.bind-linked{
  border: 0.45mm solid var(--bind-color, #4c1d95);
  box-shadow: 0 0 0 0.24mm var(--bind-glow, rgba(76,29,149,.22));
}
.ctoEntryLine.bind-selected{
  border: 0.45mm solid var(--bind-color, #4c1d95);
  box-shadow: 0 0 0 0.3mm var(--bind-glow, rgba(76,29,149,.28));
  background: rgba(76,29,149,.04);
}
.ctoEntryNum{
  font-weight: 700;
  color: #4c1d95;
}
.ctoEntryGroup{
  font-weight: 700;
}
.ctoEntryType{
  position: absolute;
  right: calc(100% + 0.8mm);
  bottom: 0.7mm;
  width: 68%;
  min-width: 14mm;
  color: #1b3e5a;
  font-size: 1.95mm;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}
.ctoEntryType::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.7mm;
  width: calc(100% + 0.8mm);
  border-bottom: 0.28mm solid rgba(27,62,90,.45);
}
.vline{
  position:absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0.6mm;
  transform: translateX(-50%);
  background: rgba(27,62,90,.85);
}
.hline{
  position:absolute;
  left: 50%;
  width: var(--colW);
  height: 0.45mm;
  transform: translate(-50%, -50%);
  background: rgba(27,62,90,.45);
}
.node{
  position:absolute;
  left: 50%;
  width: 4.8mm;
  height: 4.8mm;
  transform: translate(-50%, -50%);
  background: var(--blue-fill);
  border: 0.55mm solid rgba(27,62,90,.75);
  cursor: pointer;
}
.node:focus-visible{
  outline: 0.45mm solid rgba(27,62,90,.35);
  outline-offset: 0.5mm;
}

/* CTO's */
.ctos{
  margin-top: 0;
  font-size: 3mm;
  font-weight: 700;
  color: var(--muted);
  border: 0.45mm solid rgba(27,62,90,.38);
  border-radius: 1mm;
  padding: 0.9mm 1.4mm;
  width: fit-content;
  cursor: pointer;
  user-select: none;
}
.ctos:hover{
  border-color: rgba(27,62,90,.62);
  color: #1f5b8f;
}

/* FOOT */
.foot{
  margin-top: 12mm;
  display:flex;
  justify-content:space-between;
  gap: 10mm;
  font-size: 2.4mm;
  color: var(--muted);
}
.foot-left{ max-width: 150mm; }

/* OBS block */
.obs{
  margin-top: 24mm;
}
.obs-label{
  font-size: 3mm;
  color: var(--muted);
  margin-bottom: 2mm;
}
.obs-field{
  min-height: 30mm;
  border: 0.5mm solid rgba(27,62,90,.35);
  border-radius: 2mm;
  padding: 2mm;
  background: rgba(127,163,189,.12);
  outline: none;
  font-size: 3mm;
  color: var(--ink);
}
.obs-field:focus{
  background: rgba(127,163,189,.18);
}