.logo {
  max-height: 60px; /* Ajusta el tamaño máximo de la altura del logo */
  width: auto; /* Mantener la proporción de la imagen */
}
/* Estilo para el contenedor de las tablas */
.tables-container {
  display: flex; /* Usar flexbox para alinear las tablas horizontalmente */
  gap: 20px; /* Espacio entre las tablas */
  margin-bottom: 20px; /* Espacio inferior para separar de los botones */
}

.tabla-clientes {
  flex: 1; /* Permite que la tabla crezca y ocupe el espacio disponible */
  overflow-y: auto; /* Barra de desplazamiento vertical si el contenido es largo */
  height: 100%; /* Asegura que ocupe toda la altura del contenedor */
}

.tabla-carga {
  flex: 1; /* Permite que la tabla crezca y ocupe el espacio disponible */
  height: 100%; /* Asegura que ocupe toda la altura del contenedor */
}

/* Ajustar el tamaño del input solo en la tabla de carga */
.tabla-carga .input-cantidad {
  width: 20px; /* Ajusta este valor según el ancho deseado */
}
table{
  margin:auto;
}

td{  
  background: #00FF00;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border: solid green;
  border-radius: 15%;
  padding: 5px;
}

.con-datos{
  border: solid red;
}

a{
  color:black;
  text-decoration: none;
  
}

a:visited {
  color: Black;
  text-decoration: none;
  font-weight: bold;
}


.btn {
  background: indianred;
  border: solid black;
  border-radius: 15%;
  padding: 5px;
  margin: auto;  
}
/* General Styles */
body {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
  text-align: center;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: black;
    padding-bottom: 105px; /* Espacio suficiente para el footer fijo */
    box-sizing: border-box; /* Incluye padding y border en el tamaño total */
}

/* Navigation Bar */
nav {
    background: #f4f4f4;
    padding: 1em;
    text-align: center;
}

nav a {
    color: #333;
    margin: 0 15px;
    text-decoration: none;
}

nav a:hover {
    color: #005baa;
}

/* Hero Section */
.hero {
    background: url('hero-image.jpg') no-repeat center center/cover;
    height: 60vh;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero h1 {
    font-size: 2.5em;
    margin: 0;
}

/* Section Styles */
section {
    padding: 2em 0;
}

section:nth-of-type(even) {
    background: #f9f9f9;
}

section img {
    max-width: 100%;
    height: auto;
}

/* Contact Form */
.contact-form {
    background: #f4f4f4;
    padding: 2em;
    margin: 2em 0;
}

.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 1em;
    margin: 0.5em 0;
    border: 1px solid #ccc;
}

.contact-form button {
    background: #005baa;
    color: #fff;
    padding: 1em 2em;
    border: none;
    cursor: pointer;
}

.contact-form button:hover {
    background: #004080;
}
/* Estilos generales para el footer */
/* Estilos generales para el footer */
footer {
  background-color: #00B050; /* Color de fondo */
  color: Black; /* Color de texto */
  font-weight: bold;
  padding: 20px; /* Espaciado interno */
  text-align: center; /* Centrado del texto */
  position: fixed; /* Fija el footer en la pantalla */
  bottom: 0; /* Lo posiciona en la parte inferior */
  width: 100%; /* Ocupa el 100% del ancho de la pantalla */
  z-index: 1000; /* Se asegura de que esté por encima de otros elementos */
  box-sizing: border-box; /* Incluye padding y border en el tamaño total */
}

footer .buttons {
  display: flex; /* Usar flexbox para alinear elementos */
  justify-content: space-between; /* Espacio uniforme entre botones */
  gap: 5px; /* Espacio entre los botones eliminado para evitar problemas */
  flex-wrap: nowrap; /* Asegura que los botones no se envuelvan */
}

footer .btn {
    background: #00FF00;
  border: solid green;
  color: Black; /* Color de texto del botón */
  padding: 10px 20px; /* Relleno interno de los botones */
  text-decoration: none; /* Sin subrayado */
  border-radius: 5px; /* Bordes redondeados */
  transition: background-color 0.3s; /* Transición para cambios de color */
  display: inline-block; /* Asegura que los botones tengan un tamaño consistente */
  flex: 1; /* Cada botón ocupa una fracción igual del espacio disponible */
  max-width: none; /* Sin límite de ancho */
  min-width: auto; /* Ancho mínimo automático */
  box-sizing: border-box; /* Incluye padding y border en el tamaño total */
  text-align: center; /* Centrado del texto dentro del botón */
}
/* Estilos generales para el header */
/* Estilos generales para el header */
header {
  background-color: #00B050; /* Color de fondo */
  font-weight: bold;
  color: black; /* Color del texto */
  padding: 10px 20px; /* Espaciado interno */
  box-sizing: border-box; /* Asegura que padding y border se incluyan en el tamaño total */
}

/* Contenedor Flexbox para el contenido del header */
.header-content {
  display: flex; /* Usar Flexbox para alinear los elementos */
  justify-content: space-between; /* Espacio entre los elementos */
  align-items: center; /* Alinear verticalmente al centro */
}

/* Estilo para el título */
header h1 {
  margin: 0; /* Eliminar márgenes por defecto */
  font-size: 2em; /* Tamaño de fuente para el título */
  font-weight: bold; /* Negrita */
}

/* Estilo para el párrafo de la fecha */
header p.date {
  margin: 0; /* Eliminar márgenes por defecto */
  font-size: 1em; /* Tamaño de fuente para la fecha */
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
  .header-content {
    flex-direction: row; /* Mantener la dirección en fila */
    justify-content: space-between; /* Asegurar que los elementos estén separados */
    text-align: left; /* Alinear el texto a la izquierda */
  }

  header h1 {
    font-size: 1.5em; /* Reducir tamaño de fuente del título */
  }

  header p.date {
    font-size: 0.9em; /* Reducir tamaño de fuente de la fecha */
  }
}