/* Estilos para la tabla de divisas */
.currency-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden; /* Evita que los bordes redondeados se solapen */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra para efecto de resaltado */
    background-color: transparent; /* Elimina el fondo blanco */
    max-height: 200px; /* Ajusta la altura máxima si es necesario */
    overflow-y: auto; /* Añade barra de desplazamiento si el contenido excede la altura máxima */
}

.currency-table th, .currency-table td {
    border: none; /* Elimina los bordes de la tabla */
    text-align: center;
    padding: 20px; /* Espaciado interno reducido */
    font-family: 'Helvetica', Arial, sans-serif; /* Tipo de fuente Helvetica */
    font-size: 14px; /* Tamaño de letra reducido */
    color: #ffffff; /* Color del texto blanco */
    font-weight: bold; /* Letras en negrita */
    transition: background-color 0.3s ease; /* Transición suave para cambios de fondo */
    line-height: 1.0; /* Ajusta la altura de línea para reducir la altura de las filas */
}

.currency-table th {
    background-color: #cc0c00; /* Rojo para el primer encabezado */
    color: #ffffff; /* Color de texto blanco */
    font-size: 18px; /* Tamaño de letra para encabezados reducido */
    font-weight: bold; /* Negrita para encabezados */
}

.currency-table tr {
    background-color: #00493f; /* Fondo verde para las filas */
}

.currency-table tr:first-child {
    background-color: #cc0c00; /* Rojo para la primera fila */
}

.currency-table tr:nth-child(even) {
    background-color: #00493f; /* Fondo verde para filas pares */
}

.currency-table tr:hover {
    background-color: #26858b; /* Fondo rojo claro al pasar el mouse */
}

/* Estilos específicos para las imágenes dentro de la tabla */
.currency-table img {
    width: 150px; /* Tamaño de imagen mantenido */
    height: auto;
    margin: -10px; /* Margen negativo para ajustar el espacio exterior */
}

/* Estilos para los valores de compra y venta */
.currency-table h1 {
    margin: 4.5px; /* Elimina el margen de los encabezados h1 */
    font-size: 100px; /* Tamaño de los encabezados h1 reducido */
    color: #ffffff; /* Color del texto */
    font-weight: bold; /* Letras en negrita */
}

/* Estilos para el título de la tabla */
.table-Titulo th h3 {
    margin: 0; /* Elimina el margen de los títulos h3 dentro de th */
    font-size: 20px; /* Tamaño de los títulos h3 reducido */
    color: #ffffff; /* Color del texto blanco */
    font-weight: bold; /* Letras en negrita */
}

/* Animación de crecimiento */
@keyframes grow {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.grow {
    animation: grow 0.5s ease-out;
}

/* Animación de desvanecimiento */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 1s ease-out;
    opacity: 1; /* Asegura que la opacidad final sea 1 */
}

/* Ajustes de diseño responsivo */
@media (max-width: 768px) {
    .container_tabla-cal {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        grid-template-rows: auto auto auto; /* Ajusta las filas automáticamente */
        margin: 10px 5%; /* Márgenes laterales reducidos para pantallas pequeñas */
    }
    .table-container {
        order: 1; /* Mueve el contenedor de la tabla hacia abajo */
    }
    .calculator-modal {
        order: 2; /* Mueve el modal de la calculadora hacia arriba */
    }
}