html, body {
    height: 100%; /* Asegura que el body ocupe toda la altura */
    margin: 0; /* Elimina el margen por defecto */
}

body {
    font-family: 'Avalon', sans-serif;
    padding: 0;
    background-image: url('../img/web2.png');
    background-size: cover; /* Hace que la imagen cubra todo el ancho sin deformarse */
    background-position: center; /* Centra la imagen si hay exceso de alto */
    background-attachment: fixed;
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    display: flex; /* Utiliza flexbox */
    flex-direction: column; /* Coloca los elementos en columna */
}


.header {
    background: linear-gradient(to top, #207388, #135764);
    color: rgb(255, 255, 255);
    grid-template-columns: 2fr auto; /* Dos partes para el h1 y una parte automática para el botón de cierre de sesión */
    align-items: center; /* Alinear verticalmente los elementos */
    width: 100%;
    position: fixed;
    grid-template-columns: auto 1fr;
    z-index: 10;
}

.header h1 {
    text-align: center; 
    font-size: 23px; 
    margin: 20px 0; /* Añadir margen superior e inferior */
}


.contact-info p {
    margin: 0;
}

.logo img {
    width: 150px;
}
.ftx {
    text-align: center;
    font-size: 140%;
    color: #ffffff;
    background-color: #2268c2; /* Asegúrate de que el color de fondo esté presente */
    position: fixed; /* Para posicionar el texto en movimiento */
    left: 0; /* Asegura que esté alineado a la izquierda */
    right: 0; /* Asegura que esté alineado a la derecha */
    top: 65px; /* Ajusta la posición vertical según sea necesario */
    overflow: hidden; /* Para ocultar el texto que se desborda */
    white-space: nowrap;
    padding: 5px;
    z-index: 5;
}


.ftx span {
    display: inline-block; /* Permite que el texto se mueva en línea */
    animation: moveText 12s linear infinite; /* Aplica la animación solo al texto */
}

@keyframes moveText {
    0% {
        transform: translateX(+35%); /* Empieza fuera de la pantalla a la izquierda */
    }
    100% {
        transform: translateX(-100%); /* Termina fuera de la pantalla a la derecha */
    }
}

@media (max-width: 800px) {
    .ftx {
        font-size: 100%
        
    }
}



.container {
    display: flex; /* Coloca las cajas en fila */
    justify-content: space-around; /* Distribuye las cajas con espacio alrededor */
    flex-wrap: wrap; /* Permite que las cajas salten a nuevas filas si es necesario */
    max-width: 70%; /* Controla el ancho total del contenedor (80% del ancho de la página) */
    margin: 0 auto; /* Centra el contenedor en la página */
    gap: 10px;
}

.box {
    border: 1px solid #ccc; /* Borde de la caja */
    width: 20%; 
    box-sizing: border-box; /* Incluye el padding en el ancho total */
    word-wrap: break-word; /* Asegura que el texto haga saltos de línea */
    overflow-wrap: break-word; /* Evita que las palabras largas salgan de la caja */
    text-align: center; /* Centra el texto */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #00642b00;
    border-radius: 5%;
    background-color: #f9f9f9; /* Color de fondo claro para distinguir las cajas */
}

img {
    width: 80%;
    display: block; /* Asegura que la imagen esté en su propia línea */
    margin: 0 auto 10px; /* Centra la imagen horizontalmente y agrega un margen inferior */
}

/* Media Queries para tamaños de pantalla más pequeños */
@media (max-width: 800px) {
    .container {
        justify-content: center; 
        max-width: 100%;
    }

    .box {
        width: 40%; 
    }
}

/* Tabla sin divisiones */
.exchange-table {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.exchange-table th, .exchange-table td {
    padding: 15px;
    text-align: center;
    border: none;
}

.exchange-table th {
    background-color: #136423;
    color: white;
}

.exchange-table td:first-child {
    color: #1e7c8f; /* Texto azul para la columna de DIVISAS */
}

.exchange-table td:nth-child(2),
.exchange-table td:nth-child(3) {
    color: rgb(74, 73, 73); /* Texto negro para las columnas de COMPRA y VENTA */
}
.exchange-table td:first-child {
    border-radius: 0 0 0 10px;
}

.exchange-table td:last-child {
    border-radius: 0 0 10px 0;
}

.conversion-section {
    margin: 20px auto;
    padding: 20px; /* Aumenta el padding general sin afectar el h2 */
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
    position: relative;
}

.conversion-section h2 {
    color: #ffffff;
    background-color: #136423;
    text-align: center;
    margin: -20px -20px 0 -20px; /* Ajusta los márgenes para sobresalir sobre el padding */
    padding: 10px 0;
    width: calc(100% + 40px); /* Ancho para cubrir el padding */
    border-radius: 10px 10px 0 0;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

label {
    display: block;
    margin-bottom: 5px;
}

/* Estilo para selectores y input para que tengan el mismo tamaño */
select, input {
    padding: 10px;
    width: calc(100% - 22px); /* Ajustamos el tamaño para que el ancho sea consistente */
    border-radius: 10px;
    border: 1px solid #ddd;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
    margin-right: 10px; /* Separación entre elementos si hay más de uno en una fila */
    flex: 1; /* Hace que el input y los selectores ocupen el mismo espacio */
}

.cta-btn {
    display: block;
    width: 100%;
    margin: 20px 0;
    padding: 15px 0;
    background-color: #136423;
    color: white;
    font-size: 18px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-align: center;
}

.cta-btn:hover {
    background-color: #00642b;
}

#resultado {
    margin-top: 20px;
    font-weight: bold;
    text-align: center;
}

/* Spinner de carga */
.loading-spinner {
    font-size: 18px;
    text-align: center;
    color: #0066cc;
    margin: 20px 0;
}

/* Estilos para el resultado de la conversión */
.resultado-conversion {
    margin-top: 20px;
    font-weight: bold;
    background-color: #e0f7fa;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    color: #0066cc;
    font-size: 18px;
}

/* Estilo para el logo de WhatsApp en el botón flotante */
.whatsapp-logo {
    width: 40px; /* Ajusta el tamaño del logo */
    height: 40px;
    display: block;
    margin: 0 auto; /* Centra la imagen dentro del botón */
}

/* Ajuste para el botón flotante */
#contacto-flotante {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #136423;
    color: white;
    padding: 10px;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.37);
}



/* Footer */
footer {
    background-color: #136423;
    padding: 0%;
    color: white;
    text-align: center;
}

footer a {
    color: white;
    text-decoration: none;
}

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

/* Media Queries */
@media (max-width: 768px) {
    .header {
        flex-direction: column;
        text-align: center;
    }

    .logo img {
        width: 120px;
    }

    .exchange-table th, .exchange-table td {
        padding: 10px;
        font-size: 20px;
    }

    .cta-btn {
        font-size: 16px;
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .exchange-table th, .exchange-table td {
        padding: 8px;
    }

    .cta-btn {
        font-size: 14px;
        padding: 10px;
    }
}

.menu-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
}

/* Main Section */
.main {
    margin-top: 70px; /* Para dejar espacio debajo del header fijo */
    text-align: center;
    padding: 20px;
    flex: 1; /* Permite que el contenido principal crezca y ocupe el espacio disponible */
}

@font-face {
    font-family: 'Avalon';
    src: url('fond/Avalon\ Bold.ttf') format('truetype');
}