/* CSS per a columnes personalitzades - Solució definitiva */

/* Estructura principal de dues columnes */
.two-columns-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  margin-left: 75px;
  margin-right: 75px;
}

/* Columna esquerra - KI (25% fixa, alineada a l'esquerra) */
.col-ki-left {
  flex: 0 0 25%;
  max-width: 25%;
  text-align: left;
}

/* Columna dreta - Taula (ocupa tot l'espai restant) */
.col-table-right {
  flex: 1 1 auto;
  max-width: none;
  width: auto;
}

/* Assegurar alineació del text a l'esquerra a la columna KI */
.col-ki-left h5,
.col-ki-left p {
  text-align: left !important;
}

/* Eliminar marges del contenidor de la taula per maximitzar espai */
.col-table-right .table-container {
  margin: 0;
  padding: 0;
  max-width: none;
  margin-top: -23px;
}

/* Responsive: en pantalles petites */
@media (max-width: 991px) {
  .two-columns-wrapper {
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
  }
  
  .col-ki-left,
  .col-table-right {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}