.portConsolexpand{
background-color: #092c74;
  max-height: 35px;
  color: #fff;
/*  border: 1px solid #092c74;*/
  margin-left: 10px;
  padding: 5px 10px;
  cursor:pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  height: 35px;

}  

.portSer15{
  margin-right:8px;
 
}
.portSer16{
  display: none; position: absolute; z-index: 1000; background-color:#ffffff;padding-bottom:10px;border-radius:5px;border: 2px solid #092c74;
 
}

.portSer17{
  border: 1px solid #092c74;
 
}

.order-controls {
  display: flex;
  justify-content: left;
  gap: 10px;
  margin-top: 20px;
  margin-left: 20px;
}

.save-controls{
margin-top: 30px;
margin-left: 20px;
    
}

.column {
    list-style-type: none;
    padding: 0;
    margin: 0; /* Remover márgenes por defecto */
    max-height: 300px;
    overflow: auto;
    z-index: 20;
}


.columns-list {
    border: 2px solid #092C74;
    border-radius: 5px;
    padding: 10px;
    width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidad */
    background-color: #ffffff; /* Fondo claro para los listados */
}


 .columns-container {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  font-family: 'Roboto,''Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  width:650px;
}

.interlist-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Ajuste para el espaciado entre los botones de intercambio */
    margin-left: 10px;
    margin-right: 10px;
}
.column li {
    border: 1px solid #ccc;
    margin: 5px 0; /* Espaciado uniforme */
    padding: 6px; /* Más espacio interior */
    cursor: pointer;
    background-color: #f9f9f9;
    transition: background-color 0.2s; /* Transición suave para el hover */
}

.column li:hover {
    background-color: #e6f0ff; /* Color de hover */
}

.column li.selected {
    background-color: #add8e6;
}
.c-table {
    table-layout: fixed;
    min-width: 100%;     /* <-- asegura que ocupe al menos el 100% */
}

.c-table th,
.c-table td {
    white-space: nowrap; /* evita que el contenido se corte o crezca en altura */
}
/*
.sortable {
  position: relative;
  text-align: center;
}

.sortable::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0px; 
  transform: translateX(-50%) translateY(100%); 
  border: 6px solid transparent;
  pointer-events: none;
}

.sortable.sort-asc::after {
  border-top: none;
  border-bottom-color: #092C74;
}

.sortable.sort-desc::after {
  border-bottom: none;
  border-top-color: #092C74;
}


*/

.sortable {
position: relative;
padding-right: 20px; /* Espacio para la flechita */
}

.sortable::after {
content: '';
position: absolute;
right: 50%; /* Centra horizontalmente la flecha */
bottom: 0; /* Alinea la base de la flecha con el borde inferior */
transform: translateX(50%) translateY(100%); /* Ajusta para centrar y mover hacia abajo */
border: 8px solid transparent;
border-top-color: #092C74;
display: none;
}

.sortable.sort-asc::after {
border-top-color: transparent;
border-bottom-color: #092C74; /* Flecha hacia arriba */
display: block;
transform: translateX(50%) translateY(0); /* Centra horizontalmente y ajusta hacia arriba */
}

.sortable.sort-desc::after {
border-bottom-color: transparent;
border-top-color: #092C74; /* Flecha hacia abajo */
display: block;
transform: translateX(50%) translateY(100%); /* Centra horizontalmente y ajusta hacia abajo */
}



.celda-fija {

  overflow: hidden; /* Evita que el contenido sobresalga */
  white-space: nowrap; /* Evita que el texto se pase a la línea siguiente */
  padding-left: 10px !important;

}



.dropdown {
  position: relative;
  display:inline-block;
}

.dropdown-content {
  position: absolute;
  text-align:center;
  display: none;
  z-index: 1;
  width:100%;
}

.dropdown-content a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: white;
  background-color: #1e7e34;
  border-radius: 5px;
  font-size: 0.8rem;
  margin-top:2px;

}

.dropdown-content a:hover {
  background-color: #0b3e91;
}
.subportdate4{
    
   
  margin-right: 20px;

  background-color: #1e7e34;
    height: 35px;
    color: #fff;
    border: 1px solid #1e7e34;
    margin-left: 10px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 0.8rem;

  }
  .fa.fa-star.favorito {
    color: #28a745 !important; /* verde bootstrap */
}
.tooltipdesc {
/*  display: inline-block;*/
  cursor: pointer;
    position: relative;

 

}

.tooltipdesc-td {
padding-left: 5px !important; 
padding-right: 5px !important; 
}

/* Estilo para el texto del tooltip */
.tooltip-textPersonal {
  position: absolute;
  background-color: black;
  color: white;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 9999;
  display: none;
}



.tooltip-textPersonal::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip-text2{
  cursor: pointer;


}
.sticky-col {
  position: sticky !important;
  left: 0;
  z-index: 10;
  background-color: white; /* el mismo que la fila para evitar cortes */
  border-right: 1px solid #ddd !important; /* esto ya lo tenés */
  border-bottom: 1px solid #dee2e6 !important; /* fuerza la separación entre filas */
}

#tablaPort {
  visibility: hidden;
}


tr.blue-row:hover td,
tr.black-row:hover td {
  background-color: #a3d4ff !important; /* o el color que quieras para el hover */
  cursor: pointer;
}
.trigger {
padding: 5px;
background-color: black;
color: white;
text-align: center;
border-radius: 5px;
width:80px;
cursor: pointer;
margin-right: 2.5%;
}

.containertrigger {
display: flex;
justify-content: flex-end;
position: relative; /* Cambiado de 'fixed' a 'relative' */
width: 100%;
margin-top: 6rem;
}

.tooltip2 {
position: absolute;
background-color: black;
color: white;
padding: 10px;
border-radius: 5px;
display: none;
width: 800px;
font-size: 0.8rem;
z-index: 100;
}

.perColo{
  color:rgb(9 44 116) !important;border:  1px solid rgb(9 44 116) !important;
}
.perColo:hover{


color:#ffffff !important;
background-color: rgb(9 44 116) !important;

}

.tooltip-box-star {
    position: absolute;
    background: #ffc107;
    color: #000;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 10000;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    gap: 8px;
}

.tooltip-box-star::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #ffc107;
}

.tooltip-box-star .close-tooltip {
    cursor: pointer;
    font-weight: bold;
    color: #000;
    font-size: 1.2rem;
    line-height: 1;
}

.tooltip-star-icon {
  color: #007bff;
  font-size: 1rem;
  margin-right: 4px;
}


#tooltipResizePer {
  position: absolute;
  background: #ffc107;
  color: #000;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
  display: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

#tooltipResizePer::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #ffc107;
}

#tooltipResizePer .close-tooltip {
  cursor: pointer;
  font-weight: bold;
  color: #000;
  font-size: 1.25rem;
  line-height: 1;
}

  .menu-icon {
  position: relative;
  
  background-color: #ffffff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.menu-icon:hover {
  background-color: rgba(0, 86, 224, 0.8);
  
}
svg{
height: 29px;

} 
.menu-icon:hover svg {
  stroke: white;
}
.menu-panel {
  position: absolute;
  top: 45px;
  left: 0;
  width: 180px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgb(0, 86, 224, 0.8);
  border-radius: 10px;
  padding: 10px;
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(-10px);
  box-shadow: none; /* sin sombra */
}

.menu-panel.activePer {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}


.menu-panel label {
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.menu-panel label:hover {
  background-color: rgba(0, 86, 224, 0.1);
  color: #0056e0;
}

.menu-panel input[type="checkbox"] {
  appearance: none;
  width: 38px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.menu-panel input[type="checkbox"]::before {
  content: "";
  width: 16px;
  height: 16px;
  background: white;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.menu-panel input[type="checkbox"]:checked {
  background-color: #0056E0;
}

.menu-panel input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}


/* Desactiva resaltado de fila si no tiene la clase resaltar-fila */
body:not(.resaltar-fila) tr.blue-row:hover td,
body:not(.resaltar-fila) tr.black-row:hover td {
  background-color: inherit !important;
  cursor: default;
}

/* Desactiva tooltips si no tiene la clase tooltips-activo */
body:not(.tooltips-activo) .tooltip-textPersonal {
  display: none !important;
}
.menu-icon.menu-open {
  background-color: rgba(0, 86, 224, 0.8);
}

.menu-icon.menu-open svg {
  stroke: white;
}