/* Estilo general del formulario de filtros */
#mc_filter-form {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alinear los campos y el botón por la parte inferior */
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    gap: 5px; /* Añadir espacio entre los campos */
    flex-wrap: wrap; /* Permitir que los elementos se ajusten en una nueva línea si es necesario */
}

/* Grupos de formulario */
.mc_form-group {
    display: flex;
    flex-direction: column;
    flex-basis: 10%; /* Ancho estándar para los grupos del formulario */
}

/* Aumentar un poco el ancho del selector de moneda */
#mc_moneda {
    width: 280px; /* Aumentamos el ancho del selector de moneda */
    padding: 10px;
    border-radius: 6px; /* Borde más suave */
    border: 1px solid #d1d1d1;
    transition: border-color 0.3s ease;
}

#mc_moneda:focus {
    border-color: #007bff; /* Cambia el borde al color principal en foco */
    outline: none;
}

/* Selectores de fechas */
#mc_fecha_inicio, #mc_fecha_fin {
    width: 240px; /* Ancho específico para los selectores de fecha */
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #d1d1d1;
    transition: border-color 0.3s ease;
}

#mc_fecha_inicio:focus, #mc_fecha_fin:focus {
    border-color: #007bff;
    outline: none;
}

/* Estilo del botón de filtro */
.mc_submit-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    align-self: flex-start; /* Asegurar que el botón se alinee con el inicio del contenedor */
    flex-basis: 22%; /* El botón también ocupará el 22% del ancho */
    margin-top: 17px;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transición suave para hover */
}

.mc_submit-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px); /* Efecto de elevación en hover */
}

/* Estilo de la tabla del histórico */
#mc_historico-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 16px;
}

#mc_historico-table th, #mc_historico-table td {
    padding: 12px 15px;
    text-align: center !important; /* Centrar el contenido de las celdas */
    font-size: 18px !important;
    border-bottom: 1px solid #ddd;
}

#mc_historico-table th {
    background-color: #f8f9fa;
    font-weight: bold;
    text-align: left;
}

#mc_historico-table tbody tr:nth-child(even) {
    background-color: #f8f8f8;
}

#mc_historico-table tbody tr:hover {
    background-color: #f1f1f1; /* Cambiar el color de fondo al pasar el ratón */
}

/* Botón de exportar CSV con transiciones */
#mc_exportar-csv-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

#mc_exportar-csv-btn:disabled {
    background-color: #ccc;
}

#mc_exportar-csv-btn:hover:not(:disabled) {
    background-color: #218838;
}

/* Ajustes específicos para pantallas más pequeñas */
@media (max-width: 768px) {
    #mc_filter-form {
        flex-direction: column !important;
        width: 100% !important;
    }

    .mc_form-group {
        width: 100% !important;
        display: block !important;
    }

    .mc_submit-btn {
        width: 100% !important;
        display: block !important;
    }

    #mc_fecha_inicio, #mc_fecha_fin, #mc_moneda {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    input, select {
        width: 100% !important;
    }

    body {
        font-size: 14px !important;
    }

    /* Ajuste de la tabla para pantallas pequeñas */
    #mc_historico-table {
        font-size: 12px !important; /* Reducir el tamaño del texto */
    }

    #mc_historico-table th, #mc_historico-table td {
        padding: 8px 10px; /* Reducir el padding */
        font-size: 12px !important;
        word-wrap: break-word; /* Evitar desbordamiento de texto */
    }

    #mc_historico-container {
        padding: 0 5px;
    }
}

/* Estilo general del contenedor de la tabla */
#mc_historico-container {
    width: 100%;
    padding: 0 15px;
}

#mc_historico-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

#mc_historico-table th, #mc_historico-table td {
    padding: 12px 15px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
}

#mc_historico-table th {
    background-color: #043c84;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
}


@media screen and (min-width: 769px) and (max-width: 850px) and (min-height: 555px) and (max-height: 600px) {
  /* Ajusta el contenedor principal */
#mc_cotizaciones-container {
  width: 100%;
  max-width: 780px;
  height: 100%;
  max-height: 600px;
  margin: auto;
  overflow: hidden; /* Oculta ambos scrolls */
  box-sizing: border-box;
}

  
  /* Quitar restricciones de ancho en cada grupo para controles más personalizados */
  #mc_filter-form .mc_form-group {
    flex: none;
    min-width: auto;
  }
  
  /* Ancho reducido para selects e inputs por defecto */
  #mc_filter-form select,
  #mc_filter-form input {
    width: 180px !important;
    max-width: 180px !important;
  }
  
  /* Sobrescribir para el primer selector (tipo de moneda) */
  #mc_filter-form .mc_form-group:first-of-type select {
    width: 300px !important;  /* Ajustá el valor deseado */
    max-width: 300px !important;
  }
  
  /* Ajusta el gráfico interno si es necesario */
  #mc_cotizaciones-chart {
    width: 100%;
    height: 400px;
  }

  /* Alinear horizontalmente los controles */
  #mc_filter-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    font-size: 1em;
  }

  /* Botón "Filtrar" centrado y en línea completa */
  #mc_filter-form .mc_submit-btn {
    align-self: center;
    margin-top: 10px;
    flex-basis: 100%;
  }

  /* Centrar el texto "Mostrando" */
  #mc_info-registros {
    text-align: center;
    margin-top: 20px;
  }

  /* Paginación centrada y con separación entre números */
  #mc_paginacion-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
  }

  #mc_paginacion-container a,
  #mc_paginacion-container span {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
  }
}