* {
    font-family: 'Roboto', sans-serif; /* Fuente moderna por defecto */
  }
  
  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
  }
  
  header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 20px;
    flex: 0 0 auto; /* Altura mínima y automática */
  }
  
  iframe {
    flex: 1; /* Expandir para ocupar el espacio restante */
    border: 1px solid #ccc;
    overflow: auto;
  }
  
  footer {
    background-color: #333;
    color: white;
    text-align: center;
    /*padding: 10px;*/
    position: relative;
    bottom: 0;
    width: 100%;
  }
  
  button {
    background-color: #2b0e61; /* Color de fondo */
    color: white; /* Color del texto */
    padding: 14px 20px; /* Espaciado interno */
    margin: 8px 0; /* Margen externo */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor a una mano */
    transition: all 0.3s ease 0s; /* Transición suave para efectos de hover */
    font-weight: bold; /* Texto en negrita */
    
  }
  
  button:hover {
    background-color: #45a049; /* Cambiar el color de fondo al pasar el mouse */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Sombra al pasar el mouse */
  }
  
  .field-container {
    position: relative; /* Establece la referencia para la posición absoluta de las etiquetas */
    margin-bottom: 20px; /* Espacio entre los contenedores de campos */
  }
  
  /* Estilos para las etiquetas */
  label {
    position: absolute; /* Posición absoluta respecto a su contenedor relativo */
    top: -10px; /* Ajusta según sea necesario para mover la etiqueta hacia arriba */
    left: 0; /* Alinea la etiqueta a la izquierda */
    background-color: white; /* Fondo para que el texto no se mezcle con el borde del campo */
    padding: 0 5px; /* Pequeño relleno alrededor del texto de la etiqueta */
    font-size: 0.8em; /* Tamaño de fuente más pequeño para las etiquetas */
    color: #555; /* Color del texto de la etiqueta */
  }
  
  /* Estilos para los campos de entrada para asegurar que tengan un borde y un relleno adecuados */
  input, textarea, select {
    width: 90%; /* Ocupar todo el ancho del contenedor */
    padding: 8px; /* Relleno dentro de los campos */
    margin-top: 12px; /* Espacio arriba para no solapar la etiqueta */
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 4px; /* Bordes redondeados */
  }
  
  .left-field {
    width: 50%; /* Ancho del 45% para los campos de la izquierda */
  }
  
  .right-field {
    width: 40%; /* Ancho del 45% para los campos de la derecha */
    float: right; /* Alinear a la derecha */
  }
  
  dialog {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border-radius: 10px; /* Bordes redondeados */
  }
  
  /* Estilos específicos para la cabecera del diálogo */
  .dialog-header {
    padding-bottom: 20px; /* Espaciado debajo de la cabecera */
    margin-bottom: 20px; /* Margen debajo de la cabecera */
    border-bottom: 1px solid #eee; /* Línea divisoria */
    font-size: 1.5em; /* Tamaño de fuente */
    color: #333; /* Color del texto */
  }
  
  /* Opcional: Estilos para el botón de cerrar en la cabecera */
  .close-button {
    float: right; /* Posiciona el botón a la derecha */
    background-color: darkred; /* Fondo transparente */
    border: none; /* Sin borde */
    font-size: 1em; /* Tamaño de fuente */
    cursor: pointer; /* Cambiar el cursor a una mano */
  }
  
  menu{
    display: flex;
    justify-content: space-between;
    padding-left: 0;
  }
  
  #columnas {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
    }
  
    .column-container  {
      flex: 1;
      padding: 10px; /* Añade un poco de espacio entre las columnas */
    }
  
  .cancel-button {
    background-color: #ff4d4d; /* Rojo claro */
    color: white; /* Texto en blanco */
    border: none; /* Sin borde */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor a una mano para indicar que es clickeable */
    font-weight: bold; /* Texto en negrita */
    transition: background-color 0.3s; /* Transición suave al cambiar de color */
  }
  
  .cancel-button:hover {
    background-color: #8a0000; /* Rojo un poco más oscuro al pasar el mouse */
  }

  #respuesta-text {
    display: flex;
    height: 100%;
    min-width: 400px;
    min-height: 250px;
    overflow: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8em;
    color: #333;
    margin-top: 0px;
  }

  #enviado-text {
    display: flex;
    height: 100%;
    min-width: 400px;
    min-height: 250px;
    overflow: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8em;
    color: #333;
    margin-top: 0px;
  }

  #respuesta label {
    font-size: small;
    position: relative;
    top: 0px;
    padding: 0;
  }