/* Estilos generales */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;             /* Asegura que el body y html ocupen toda la altura de la ventana */
}

body {
  display: flex;              /* Usamos flexbox para el diseño */
  flex-direction: column;     /* Colocamos los elementos en una columna */
  height: 100vh;              /* Altura total de la ventana */
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 0;                 /* Eliminar relleno por defecto */
}

main {
  flex: 1;                    /* Esto hace que el contenido principal ocupe el espacio disponible */
}

/* Header sin espacio superior */
header {
  background-color: #003366; /* Azul oscuro */
  color: white;              /* Texto blanco */
  padding: 20px;             /* Espaciado interno */
  text-align: left;        /* Alineación centrada */
  margin: 0;                 /* Sin márgenes */
}

/* Header h1 */
header h1 {
  font-size: 2em;
  margin-bottom: 10px;
}

header nav ul {
  list-style: none; /* Eliminar los puntos de la lista */
}

header nav ul li {
  display: inline; /* Mostrar los elementos en línea */
  margin: 0 15px;  /* Espaciado entre los elementos */
}

header nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.1em;
}

header nav ul li a:hover {
  text-decoration: underline;
}

/* Contenedor principal con Flexbox */
.container {
  display: flex;
  flex-direction: row-reverse; /* Invertir el orden de las columnas */
  justify-content: space-between; /* Asegura que las columnas se alineen correctamente */
  gap: 20px; /* Espacio entre las columnas */
}

/* Estilos para la columna izquierda (ahora en la derecha, dos tercios) */
.columna-izquierda {
  flex: 7; /* Ocupa 2 partes del espacio */
  background-color: #f4f4f4; /* Azul oscuro */
  color: #003366;
  padding: 10px;
  border-radius: 8px;
}

/* Estilos para la columna derecha (ahora en la izquierda, un tercio) */
.columna-derecha {
  flex: 2; /* Ocupa 1 parte del espacio */
  background-color: #f4f4f4; /* Azul más claro */
  color: #003366;
  padding: 10px;
  border-radius: 8px;
}
.identificacion{
	 width: 100%;
            background-color: #99C2FF; /* Azul claro */
            padding: 20px;
            text-align: center;
            border: 2px solid #003366; /* Borde azul oscuro */
            border-radius: 8px;
            margin-bottom: 10px;
			text-align: center;
}
.btn-submit {
    background-color: #003366; /* Azul oscuro */
    color: white; /* Texto en blanco */
    font-weight: bold; /* Letra en negrita */
    padding: 10px 20px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cursor de mano */
    font-size: 16px; /* Tamaño de letra */
    transition: background-color 0.3s ease; /* Efecto suave al pasar el mouse */
}

.btn-submit:hover {
    background-color: #002244; /* Azul más oscuro al pasar el mouse */
}

.table-container {
    text-align: center; /* Alinea el contenido en el centro */
}

.table-container table {
    margin: auto; /* Centra la tabla horizontalmente */
}

/* Estilos para el footer */
footer {
  background-color: #003366;
  color: white;
  padding: 10px 0;
  text-align: center;
  position: relative;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

/* Contenedor del pie de página con 4 columnas */
.footer-content {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 10px;
}

/* Columnas del footer */
.footer-column {
  width: 22%; /* Ancho para cada columna */
}

.footer-column p {
  margin: 1px 0; /* Reducir el margen entre los párrafos */
}

/* Primera columna: Logotipo pequeño */
.footer-column.logo {
  width: 12%; /* Hacemos la columna del logotipo más pequeña */
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-column.logo img {
  width: 80px; /* Tamaño pequeño del logotipo */
  height: auto;
}

/* Segunda columna: Dirección alineada a la derecha */
.footer-column.direccion {
	width: 27%; /* Hacemos la columna de dirección mas grande */
  text-align: right;
}

/* Tercera columna: Contacto con íconos alineados a la izquierda */
.footer-column.contacto {
	width: 27%; /* Hacemos la columna de dirección mas grande */
  text-align: left;
}



/* Cuarta columna: Web e Instagram */
.footer-column.enlaces {
  text-align: right;
}

.footer-column a {
  color: white;
  text-decoration: none;
  display: block; /* Cada enlace se muestra en una línea */
  margin-top: 5px;
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-column i {
  margin-right: 10px; /* Espacio entre el ícono y el texto */
}

/* Estilos responsive para pantallas pequeñas */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-column {
    width: 100%;
    margin-bottom: 20px; /* Separación entre columnas */
  }

  .footer-column.logo img {
    width: 70px; /* Reducir el tamaño del logotipo en pantallas pequeñas */
  }
}