.ftth-pon-relation {
  display:grid;
  gap:7px;
  margin-top:2px;
  padding:9px;
  border:1px solid color-mix(
    in srgb,
    var(--accent) 40%,
    var(--border)
  );
  border-radius:8px;
  background:color-mix(
    in srgb,
    var(--accent) 4%,
    var(--panel)
  );
}

.ftth-pon-relation-title b,
.ftth-pon-relation-title small {
  display:block;
}

.ftth-pon-relation-title b {
  color:var(--accent);
  font-size:11px;
}

.ftth-pon-relation-title small {
  color:var(--muted);
  font-size:9px;
}

.ftth-pon-relation label {
  color:var(--muted);
  font-size:10px;
}

.ftth-pon-relation select,
.ftth-pon-relation input {
  display:block;
  width:100%;
  min-width:0;
  margin-top:3px;
  padding:7px 8px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--panel);
  color:var(--text);
}

.ftth-pon-relation option:disabled {
  color:var(--red);
}

.ftth-pon-save {
  width:100%;
  margin-top:4px;
}

/* La relación OLT ocupa todo el ancho de la tarjeta del puerto FDP */
.ftth-fdp-port-row > .ftth-pon-relation {
  grid-column:1 / -1 !important;
  width:100%;
  min-width:0;
  margin-top:2px;
}

.ftth-fdp-port-row > .ftth-pon-relation label {
  display:block;
  width:100%;
  min-width:0;
}

.ftth-fdp-port-row > .ftth-pon-relation select,
.ftth-fdp-port-row > .ftth-pon-relation input {
  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  height:36px;
}

.ftth-fdp-port-row > .ftth-pon-relation select {
  text-overflow:ellipsis;
}

/* En paneles con un poco más de espacio se usan dos columnas */
@media (min-width:1200px) {
  .ftth-info .ftth-pon-relation {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ftth-info .ftth-pon-relation-title {
    grid-column:1 / -1;
  }
}