.persona-node {
    fill: #e74c3c;
}

.empresa-node {
    fill: #f1c40f;
}

.publico {
    stroke: #c0392b;
    stroke-width: 2px;
}

.politico {
    stroke: #16a085;
    stroke-width: 2px;
}

.privado {
    stroke: #8e44ad;
    stroke-width: 2px;
}

.link {
    marker-end: url(#suit);
	stroke-opacity: 1;
	stroke-width: 3px;
}

.empresa-empresa {
	stroke: #9b59b6;
}

.persona-empresa {
	stroke: #2ecc71;
}

.persona-persona {
	stroke: #3498db;
}

div .tooltip {
    position: absolute;
    font: 1rem sans-serif;
    background: #ecf0f1;
    color: #2c3e50;
    border: 1px;
    border-style: solid;
    border-color: steelblue;
    border-radius: 8px;
}

@media (max-width: 374px) {
	.tooltip {
		display: none !important;
	}
}

svg .link-text {
    opacity: 0.4;
    fill: #2c3e50;
}
svg .link-text:hover {
    opacity: 1;
    fill: #2c3e50;
}



text {
	font-weight: 600;
}

.select2-selection {
	overflow: hidden;
}

.select2-selection__rendered {
	white-space: normal;
	word-break: break-all;
	padding-top: 3px !important;
}

.select2 {
	width: 100% !important;
	
}

.select2-selection--single {
	height: 38px !important;
}

.select2-selection--single {
	border: 1px solid #CED4DA !important;
}

input {
  outline-color: #719ECE;
}


 /* Estilos para los cards */
        .card {
            margin-bottom: 20px;
            border: 1px solid rgb(0, 0, 0);
            border-radius: 10px;
        }
        .col-8 {
			margin-top: 17px;
			
			border-radius: 10px;
			height:30%;
			width: 65%;
		}


  .tablasContenedor {
    margin: auto;
    max-width: 100%;
    width: 80%;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 10px;
    overflow-x: auto; 
    white-space: nowrap;

} td.d-none.d-sm-block {
        display: table-cell;
        height: 89px; 
        padding-top: 10px;
        padding-bottom: 10px;
        vertical-align: middle; 
    }
 .status-container {
  display: flex;
  gap: 1rem;
  margin-top: 10px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
}

.status-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: gray; /* color por defecto: desconectado */
  display: inline-block;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  transition: background-color 0.3s ease;
}

/* Ejemplo de estados */
.status-dot.connected {
  background-color: green;
  box-shadow: 0 0 8px green;
}

.status-dot.disconnected {
  background-color: red;
  box-shadow: 0 0 8px red;
}