style.css

body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    color: whitesmoke;
    background-color: black; /* Color de fondo para el cuerpo */
  }
  
  .container {
    display: flex;
    justify-content: space-between; /* Distribuye las columnas con espacio entre ellas */
    padding: 10px; /* Espacio alrededor del contenedor */
    height: 100%; /* Ocupar el alto completo del viewport */
  }
  
  .custom-text1 {
    width: 100%; /* Ancho del textarea al 100% del contenedor */
    height: 40%; /* Altura del textarea al 50% del contenedor */
    padding: 10px; /* Relleno interior */
    box-sizing: border-box; /* Incluir el padding en el ancho total */
    resize: none; /* Evitar redimensionamiento del textarea */
    color: whitesmoke;
    background-color: black;
 }
  
  .custom-text2 {
    width: 100%; /* Ancho del textarea al 100% del contenedor */
    height: 20%; /* Altura del textarea al 30% del contenedor */
    padding: 10px; /* Relleno interior */
    box-sizing: border-box; /* Incluir el padding en el ancho total */
    resize: none; /* Evitar redimensionamiento del textarea */
    color: whitesmoke;
    background-color: black;
 }
  
  .left-column {
    width: 60%; /* Ancho del 70% para la columna izquierda */
    padding: 10px; /* Espacio interno dentro de la columna */
    box-sizing: border-box; /* Incluir el padding en el ancho total */
  }
  

  .right-column {
    width: 40%; /* Ancho del 30% para la columna derecha */
    padding: 10px; /* Espacio interno dentro de la columna */
    box-sizing: border-box; /* Incluir el padding en el ancho total */
    /*display: flex; /* Utiliza flexbox para alinear verticalmente */
    /*justify-content: center; /* Centrar contenido horizontalmente */
    /*align-items: center; /* Centrar contenido verticalmente */
  }
  
  .button-container {
    margin-top: 20px; /* Espacio superior para separar los botones del textarea */
    display: flex; /* Utiliza flexbox para alinear los botones */
    justify-content: flex-start; /* Alinea los botones al inicio */
  }
  
  .button-container button {
    margin-right: 10px; /* Margen derecho entre los botones */
    padding: 10px 20px; /* Relleno interior de los botones */
    font-size: 14px; /* Tamaño de la fuente de los botones */
  }
  
  table {
    width: 100%; /* Ancho completo de la tabla */
    height: 85%;
    /*max-width: 100%; /* Máximo ancho de la tabla */
    border-collapse: collapse; /* Colapsar bordes de celda */
    table-layout: fixed; /* Fijar el tamaño de la tabla */
  }
  
  table, th, td {
    border: 1px solid grey; /* Borde de celda */
    padding: 1px; /* Relleno de celda */
    text-align: center; /* Alineación de texto en celda */
    font-size: 10px; /* Tamaño de la fuente */
  }
  
  th {
    font-size: 10px
  }

 /* Estilos básicos para las pestañas */
 .tab {
  display: none; /* Oculta todas las pestañas */
}
.tab.active {
  display: block; /* Muestra la pestaña activa */
}
.tab-button {
  cursor: pointer;
  padding: 5px 10px;
  background-color: #000000;
  border: 1px solid #444;
  color: #999;
  border-bottom: none;
  transition: background-color 0.3s ease;
}
.tab-button.active {
  background-color: #555555;
  color: #ccc
}