/* Estilo para el contenedor de la tabla */
.container_tabla-cal {
    display: grid;
    grid-template-columns: 50% 50%; 
    gap: 0px; /* Espacio entre columnas */
    max-width: 98%; /* Ancho máximo del contenedor */
    margin: 0px auto 0px; /* Reducido margen superior, margen inferior aumentado */
    padding: 0px; /* Espacio interno aumentado */

}

/* Estilos para el contenedor de la tabla */
.table-container-principal {
    width: 98%;
}
/* Estilos para el contenedor de la tabla */
.table-container {
    width: 98%;
    
}

/* Estilos para el modal de la tabla */
.table-modal {
    width: 100%;
    max-width: 800px; /* Ancho máximo reducido */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
}

.divida-principal{
    margin: 4.5px; /* Elimina el margen de los encabezados h1 */
   
    color: #ffffff; /* Color del texto */
    font-weight: bold; /* Letras en negrita */
    text-align: center;
}

/* Estilos para la tabla de divisas */
.currency-table {
    width: 100%;
    border-collapse: collapse; /* Mantiene el estilo de colapso para que no haya espacios entre celdas */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra para efecto de resaltado */
    background-color: transparent; /* Elimina el fondo blanco */
    overflow: hidden; /* Para que los bordes redondeados no se solapen */
    border-radius: 8px; /* Bordes redondeados solo en las esquinas */
}

.currency-table th, .currency-table td  {
    border: none; /* Elimina los bordes de la tabla */
    text-align: center;
    padding: 2px; /* 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 */
}

/* Aplica bordes redondeados solo a las esquinas superiores de la tabla */
.currency-table th:first-child {
    border-top-left-radius: 8px;
}

.currency-table th:last-child {
    border-top-right-radius: 8px;
}

.currency-table tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

.currency-table tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

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

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

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

.currency-table tr:hover {
    background-color: #00493f; /* #00493f; Verde para la fila selecionada*/
}

/* Estilos específicos para las imágenes dentro de la tabla */
.currency-table img {
    width: 75px; /* Tamaño de imagen mantenido */
    height: auto;
    margin: -20px; /* 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: 35px; /* Tamaño de los encabezados h1 reducido */
    color: #ffffff; /* Color del texto */
    font-weight: bold; /* Letras en negrita */
    text-align: center;
}

/* 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 */
    }
}

/* Estilo para el botón flotante */
.ver_mas {
    position: fixed; /* Fija el botón en la pantalla */
    bottom: 0px; /* Espacio desde el borde inferior (puedes ajustar esto si es necesario) */

    top: auto; /* Establece el valor de top como automático para que no afecte el botón */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente para el botón */
    border-radius: 50%; /* Hace que el botón sea circular */
    border: none; /* Elimina el borde del botón */
    padding: 8px; /* Espaciado interno del botón */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para dar un efecto de profundidad */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s, box-shadow 0.3s; /* Transición suave para cambios de fondo y sombra */
}

.ver_mas:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Fondo más oscuro al pasar el mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Sombra más pronunciada al pasar el mouse */
}

.ver_mas img {
    width: 20px; /* Ancho del ícono */
    height: 20px; /* Alto del ícono */
}